search

emilkowalski / vaul

An unstyled drawer component for React.
https://vaul.emilkowal.ski
MIT License
5.27k stars 170 forks source link

When drawers from right are opened, the page scrolls to the top #303

Open btnalexandre opened 3 months ago

btnalexandre commented 3 months ago

Hello everyone!

I've noticed a bug in the lib that doesn't allow scroll persistence in some cases when I open the drawer.

Case without bug (codesandbox)

However, when the body has a height of 100% in the css, the lib overwrites the value by changing it to auto when opening. This causes scrolling to be lost and the page scrolls to the top of the page.

Case with bug (codesandbox)

In this case the height: 100%; is set to the body(file : globals.css)

The temporary solution I had to adopt in my project is to add !important to the height: 100% property in body, which keeps the initial position persistent when the drawer is opened.

Thanks !

adebiyial commented 3 months ago

Also, @btnalexandre, if the page has a vertical scroll, the body will have a negative top value. It affects the positioning of other items. Here: https://github.com/emilkowalski/vaul/blob/a30da7d1618afd8b33637982695f0676130346ff/src/use-position-fixed.ts#L35

So I think the bug is because that's not being set.

btnalexandre commented 1 month ago

Yeah thanks @adebiyial for the tips 🙂 ! So only the developer of this lib can correct this?