diff --git a/.yarn/versions/1acbd181.yml b/.yarn/versions/1acbd181.yml
new file mode 100644
index 0000000000..74e58ca25c
--- /dev/null
+++ b/.yarn/versions/1acbd181.yml
@@ -0,0 +1,14 @@
+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
+ radix-ui: patch
+
+declined:
+ - primitives
diff --git a/packages/react/popper/src/Popper.stories.tsx b/packages/react/popper/src/Popper.stories.tsx
index 607e1fc12b..ba30616e8d 100644
--- a/packages/react/popper/src/Popper.stories.tsx
+++ b/packages/react/popper/src/Popper.stories.tsx
@@ -132,6 +132,37 @@ export const WithUpdatePositionStrategyAlways = () => {
);
};
+export const WithoutLayoutShift = () => {
+ const [open, setOpen] = React.useState(false);
+ const [showElement, setShowElement] = React.useState(false);
+
+ return (
+
+
+ {showElement && element
}
+
+ setOpen(true)}>
+ open
+
+ {open && (
+
+
+
+
+
+
+
+
+ )}
+
+
+ );
+};
+
export const Chromatic = () => {
const [scrollContainer1, setScrollContainer1] = React.useState(null);
const [scrollContainer2, setScrollContainer2] = React.useState(null);
diff --git a/packages/react/popper/src/Popper.tsx b/packages/react/popper/src/Popper.tsx
index 16ab3da7fa..d713f43e77 100644
--- a/packages/react/popper/src/Popper.tsx
+++ b/packages/react/popper/src/Popper.tsx
@@ -122,6 +122,7 @@ interface PopperContentProps extends PrimitiveDivProps {
sticky?: 'partial' | 'always';
hideWhenDetached?: boolean;
updatePositionStrategy?: 'optimized' | 'always';
+ updatePositionOnLayoutShift?: boolean;
onPlaced?: () => void;
}
@@ -140,6 +141,7 @@ const PopperContent = React.forwardRef
sticky = 'partial',
hideWhenDetached = false,
updatePositionStrategy = 'optimized',
+ updatePositionOnLayoutShift = true,
onPlaced,
...contentProps
} = props;
@@ -178,6 +180,7 @@ const PopperContent = React.forwardRef
whileElementsMounted: (...args) => {
const cleanup = autoUpdate(...args, {
animationFrame: updatePositionStrategy === 'always',
+ layoutShift: updatePositionOnLayoutShift,
});
return cleanup;
},