js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Popup] Use viewport as default boundary for flip too (#865)

Browse Source
This commit is contained in:
Lea Verou
2025-04-10 10:52:15 -05:00
committed by GitHub
parent f13deb87bb
commit 2f300d8930
2 changed files with 8 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
docs/docs/components/popup.md
View File

@@ -473,12 +473,15 @@ Use the `sync` attribute to make the popup the same width or height as the ancho
When the popup doesn't have enough room in its preferred placement, it can automatically flip to keep it in view and visually connected to its anchor.
To enable this, use the `flip` attribute. By default, the popup will flip to the opposite placement, but you can configure preferred fallback placements using `flip-fallback-placement` and `flip-fallback-strategy`. Additional options are available to control the flip behavior's boundary and padding.
By default, flip takes effect when the popup would overflow the viewport.
You can use `boundary="scroll"` to make the popup resize when it overflows its nearest scrollable container instead.
Scroll the container to see how the popup flips to prevent clipping.
```html {.example}
<div class="popup-flip">
<div class="overflow">
<wa-popup placement="top" flip active>
<wa-popup placement="top" flip active boundary="scroll">
<span slot="anchor"></span>
<div class="box"></div>
</wa-popup>

12
src/components/popup/popup.ts
View File

@@ -347,25 +347,21 @@ export default class WaPopup extends WebAwesomeElement {
this.popup.style.height = '';
}
let overflowBoundary, defaultBoundary;
let defaultBoundary;
if (SUPPORTS_POPOVER && !isVirtualElement(this.anchor)) {
if (SUPPORTS_POPOVER && !isVirtualElement(this.anchor) && this.boundary === 'scroll') {
// When using the Popover API, the floating element is no longer in the same DOM context
// as the overflow ancestors so Floating-UI can't find them.
// For flip, `elementContext: 'reference'` gets it to use the anchor element instead,
// but the option is not available for shift() or size(), so we basically need to implement it ourselves.
overflowBoundary = getOverflowAncestors(this.anchorEl as Element).filter(el => el instanceof Element);
}
if (this.boundary === 'scroll') {
defaultBoundary = overflowBoundary;
defaultBoundary = getOverflowAncestors(this.anchorEl as Element).filter(el => el instanceof Element);
}
// Then we flip
if (this.flip) {
middleware.push(
flip({
boundary: this.flipBoundary || overflowBoundary,
boundary: this.flipBoundary || defaultBoundary,
// @ts-expect-error - We're converting a string attribute to an array here
fallbackPlacements: this.flipFallbackPlacements,
fallbackStrategy: this.flipFallbackStrategy === 'best-fit' ? 'bestFit' : 'initialPlacement',