diff --git a/src/components/Dialog/DialogAnchor.tsx b/src/components/Dialog/DialogAnchor.tsx index 9ee362183..4885777e4 100644 --- a/src/components/Dialog/DialogAnchor.tsx +++ b/src/components/Dialog/DialogAnchor.tsx @@ -42,7 +42,7 @@ export function useDialogAnchor({ // update is non-null only if popperElement is non-null update?.(); } - }, [open, popperElement, update]); + }, [open, placement, popperElement, update]); if (popperElement && !open) { setPopperElement(null); diff --git a/src/components/Dialog/hooks/usePopoverPosition.ts b/src/components/Dialog/hooks/usePopoverPosition.ts index 4e274a44c..57708bad7 100644 --- a/src/components/Dialog/hooks/usePopoverPosition.ts +++ b/src/components/Dialog/hooks/usePopoverPosition.ts @@ -69,13 +69,15 @@ export function usePopoverPosition({ }: UsePopoverParams) { const autoMw = autoMiddlewareFor(placement); const offsetMiddleware = toOffsetMw(offset); + const isSidePlacement = placement.startsWith('left') || placement.startsWith('right'); const middleware = [ // offset first (mirrors common Popper setups) ...(offsetMiddleware ? [offsetMiddleware] : []), // choose between autoPlacement (Popper's "auto*") OR flip() - ...(autoMw ? [autoMw] : allowFlip ? [flipMw()] : []), + // only allow flip when not explicitly 'left*' or 'right*' + ...(autoMw ? [autoMw] : allowFlip && !isSidePlacement ? [flipMw()] : []), // viewport collision adjustments ...(allowShift ? [shiftMw({ padding: 8 })] : []), @@ -93,6 +95,7 @@ export function usePopoverPosition({ return useFloating({ middleware, placement: seedPlacement, + strategy: 'fixed', whileElementsMounted: freeze ? undefined : (reference, floating, update) =>