diff --git a/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts b/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts index 66299af48..3c3e1fe2f 100644 --- a/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts +++ b/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts @@ -103,6 +103,7 @@ type Options = { side: PopoverSide disableMobileFullscreenTakeover?: boolean disableApplyingMobileWidth?: boolean + disableFlip?: boolean maxHeightFunction?: (calculatedMaxHeight: number) => number | 'none' offset?: number } @@ -115,6 +116,7 @@ export const getPositionedPopoverStyles = ({ side, disableMobileFullscreenTakeover, disableApplyingMobileWidth, + disableFlip, maxHeightFunction, offset, }: Options): PopoverCSSProperties | null => { @@ -135,7 +137,7 @@ export const getPositionedPopoverStyles = ({ const sideWithLessOverflows = preferredSideRectCollisions[side] ? oppositeSide : side const finalAlignment = getNonCollidingAlignment({ - finalSide: sideWithLessOverflows, + finalSide: disableFlip ? side : sideWithLessOverflows, preferredAlignment: align, collisions: preferredSideRectCollisions, popoverRect, @@ -145,7 +147,7 @@ export const getPositionedPopoverStyles = ({ const finalPositionedRect = getPositionedPopoverRect( popoverRect, anchorRect, - sideWithLessOverflows, + disableFlip ? side : sideWithLessOverflows, finalAlignment, offset, ) @@ -153,7 +155,7 @@ export const getPositionedPopoverStyles = ({ let maxHeight = getPopoverMaxHeight( getAppRect(), anchorRect, - sideWithLessOverflows, + disableFlip ? side : sideWithLessOverflows, finalAlignment, disableMobileFullscreenTakeover, ) @@ -164,7 +166,7 @@ export const getPositionedPopoverStyles = ({ return getStylesFromRect({ rect: finalPositionedRect, - side: sideWithLessOverflows, + side: disableFlip ? side : sideWithLessOverflows, align: finalAlignment, disableMobileFullscreenTakeover, disableApplyingMobileWidth, diff --git a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx b/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx index 68927b4cc..ba8571393 100644 --- a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx +++ b/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx @@ -26,6 +26,7 @@ const PositionedPopoverContent = ({ togglePopover, disableClickOutside, disableMobileFullscreenTakeover, + disableFlip, maxHeight, portal = true, offset, @@ -53,7 +54,8 @@ const PositionedPopoverContent = ({ documentRect, popoverRect: popoverRect ?? popoverElement?.getBoundingClientRect(), side, - disableMobileFullscreenTakeover: disableMobileFullscreenTakeover, + disableMobileFullscreenTakeover, + disableFlip, maxHeightFunction: maxHeight, offset, }) @@ -140,9 +142,9 @@ const PositionedPopoverContent = ({ >