primitives
primitives copied to clipboard
radix-ui
Scrolling issue - Select on sticky header make unwanted page scroll up
Bug report
Current Behavior
Page scroll up when open or close radix-ui/react-select inside a sticky header. Maybe because the select component is focused on open/close
Expected behavior
Global page scroll doesn't change when open/close a select compoment
Reproducible example
https://codesandbox.io/s/scrolling-issue-select-on-sticky-header-sr5fgz?file=/src/App.tsx
In my project i have this issue on select open. I dont find a way to reproduce it on codesandbox, but on codesandbox i have this issue on close
On my project:
On codesandbox: (https://codesandbox.io/s/scrolling-issue-select-on-sticky-header-sr5fgz?file=/src/App.tsx)
Suggested solution
Maybe provide a way to disable the focus onClick or use a focus without scrolling with something like
element.focus({ preventScroll: true });
Additional context
Your environment
| Software | Name(s) | Version |
|---|---|---|
| Radix Package(s) | @radix-ui/react-select | 1.2.2 |
| React | react | 18.2.0 |
| Browser | Chrome on windows | 116.0.5845.111 |
| Assistive tech | ||
| Node | n/a | |
| npm/yarn | ||
| Operating System |
Hello @zecka i had a similar issue on a project i worked on. what i did is put the Select.Content inside Select.Portal and it fixed the issue for me. I tested it on your code on codesandbox and it worked. Happy coding.
I had an issue where if <body> had height: 100vh; set, opening the select causes the jump to top. Very curious as to why it's happening.
I had an issue where if
<body>hadheight: 100vh;set, opening the select causes the jump to top. Very curious as to why it's happening.
I can confirm that i have same issue in NextJS when set:
body > div { @apply flex min-h-svh flex-col; }
then select content jumps to top and became not visible, as a temporry workaround i use avoidCollisions={false} but i'm looking for solution as well
