Scrollbar disappears when SelectContent opens, causing layout shift #753
Description
When using @radix-ui/react-select (through shadcn/ui in my case), opening the SelectContent locks the <body> scroll by applying overflow: hidden. This removes the scrollbar and causes a small layout shift/jump because the content width changes.
This is especially noticeable on desktop when the page has a vertical scrollbar.
Steps to reproduce
- Create a
Selectcomponent with multipleSelectItems. - Open the dropdown when the page is scrollable.
- Observe that Radix applies a
data-radix-scroll-lockattribute on<body>and setsoverflow: hidden. - The scrollbar disappears, shifting the page content horizontally.
Expected behavior
Ideally:
- Opening a
Selectshould not cause the layout to shift. - The scrollbar space should remain reserved, or there should be an option to disable scroll lock for
Select(similar todisableScrollLockin other components likeDialog).
Actual behavior
- The scrollbar disappears when the dropdown opens.
- Layout shifts horizontally for a moment.
- This feels disruptive, especially in layouts where alignment is important.
Questions / Concerns
- Why does
Selectneed to lock the body scroll by default? - Is there a recommended way to avoid layout shift (other than global CSS hacks like
scrollbar-gutter: stable;)? - Could
SelectContentexpose adisableScrollLockprop (likeDialogandPopover) so developers can choose?
Environment
- Radix UI version: [your version here]
- Framework: Next.js 15 (App Router)
- Styling: Tailwind + shadcn/ui
I understand that scroll locking is often used in modals to prevent background interaction, but in the case of Select, it feels a bit unnecessary and causes usability issues. It would be great if there was more flexibility here.