Opening shadcn dialog resets scroll to top #565
Replies: 3 comments 6 replies
-
|
I'm not certain what is triggering the scroll reset. Can you determine what's triggering the reset? |
Beta Was this translation helpful? Give feedback.
-
|
It took me 2 hours just to reduce it down to this repro, so I'm really not sure, the only I've found by trial and error is setting I'd need to dig further into radix and the shadcn styles |
Beta Was this translation helpful? Give feedback.
-
|
I'm also experiencing this with shadcn Select, and I've noticed it also happens with the User dropdown menu. I think it might relate to this being injected into the head div 
edit: Making the below change at the top of Document() in app/root.tsx seems to have fixed the issue but I don't know enough to understand the implications // <html lang="en" className={`${theme} h-full overflow-x-hidden`}>
<html lang="en" className={`${theme} h-full`}> |
Beta Was this translation helpful? Give feedback.
-
|
I came to the same conclusion when working through this, it seems shadcn works better with body scrolling than html scrolling, |
Beta Was this translation helpful? Give feedback.
-
|
I've been stuck on this for a while, thanks for looking into this further guys. Removing |
Beta Was this translation helpful? Give feedback.
-
|
I ran into this issue with DropdownMenus. It's because the epic-stack's app is styled to have a fixed height. My app does not need a fixed height. Swapping |
Beta Was this translation helpful? Give feedback.
-
|
To be fair to Kent, the issue is technically not because of the fixed height. It's a combination of the fixed height of the app and the styles that are injected by shadcn when the modal is displayed. I would expect the components to work with or without a fixed height, but it was just easier to change the class name for my use case. |
Beta Was this translation helpful? Give feedback.
-
|
This saved me! Thank you @jamestrenda ! |
Beta Was this translation helpful? Give feedback.
-
|
With Dropdown Menu & Select, I saw that there are issues within the primitives in Radix UI that cause this. In fact I had to migrate to using Dropdown Menu instead of select because of it. Anyways, in those scenarios, and specifically with Dropdown Menu, the way to fix it was to set |
Beta Was this translation helpful? Give feedback.
-
I'm losing scroll position after adding the shadcn dialog and opening it, should this be expected to work? Could be related to #346
Steps
npx create-epic-app@latestnpm install lucide-react(for shadcn dialog)npx shadcn-ui@latest add dialogExpected
Dialog opens and the scroll position is preserved
Actual
Dialog opens but scroll position resets to the top
In this repo I've done that, the only change to the initial template are the shadcn dialog bits: https://github.com/WillSmithTE/dialog-scroll
dialog-scroll-reset.mov
Beta Was this translation helpful? Give feedback.
All reactions