diff --git a/.yarn/versions/4d3ad0f6.yml b/.yarn/versions/4d3ad0f6.yml new file mode 100644 index 0000000000..6659a6e18f --- /dev/null +++ b/.yarn/versions/4d3ad0f6.yml @@ -0,0 +1,11 @@ +releases: + "@radix-ui/react-context-menu": patch + "@radix-ui/react-dropdown-menu": patch + "@radix-ui/react-hover-card": patch + "@radix-ui/react-menu": patch + "@radix-ui/react-menubar": patch + "@radix-ui/react-popover": patch + "@radix-ui/react-popper": patch + "@radix-ui/react-select": patch + "@radix-ui/react-tooltip": patch + primitives: patch diff --git a/packages/react/popper/src/Popper.stories.tsx b/packages/react/popper/src/Popper.stories.tsx index 8cb6de7c3e..a8ecc3a5bc 100644 --- a/packages/react/popper/src/Popper.stories.tsx +++ b/packages/react/popper/src/Popper.stories.tsx @@ -445,6 +445,33 @@ export const Chromatic = () => { }; Chromatic.parameters = { chromatic: { disable: false } }; +export const WithAbsolutePositionStrategy = () => { + return ( +
+ + #1 + + + + Some content + + + +
+ ); +}; + const Scrollable = (props: any) => (
>; sticky?: 'partial' | 'always'; hideWhenDetached?: boolean; + disablePositionUpdate?: boolean; updatePositionStrategy?: 'optimized' | 'always'; + positionStrategy?: 'fixed' | 'absolute'; onPlaced?: () => void; } @@ -139,6 +141,9 @@ const PopperContent = React.forwardRef collisionPadding: collisionPaddingProp = 0, sticky = 'partial', hideWhenDetached = false, + // default to `fixed` strategy to avoid focus scroll issues + positionStrategy = 'fixed', + disablePositionUpdate = false, updatePositionStrategy = 'optimized', onPlaced, ...contentProps @@ -172,15 +177,16 @@ const PopperContent = React.forwardRef }; const { refs, floatingStyles, placement, isPositioned, middlewareData } = useFloating({ - // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues - strategy: 'fixed', + strategy: positionStrategy, placement: desiredPlacement, - whileElementsMounted: (...args) => { - const cleanup = autoUpdate(...args, { - animationFrame: updatePositionStrategy === 'always', - }); - return cleanup; - }, + whileElementsMounted: disablePositionUpdate + ? undefined + : (...args) => { + const cleanup = autoUpdate(...args, { + animationFrame: updatePositionStrategy === 'always', + }); + return cleanup; + }, elements: { reference: context.anchor, },