Open Valdes-Tresanco-MS opened 6 months ago
Thanks for reporting this issue.
If you don't toggle the drawer closed on the links, does the page scroll to the anchor correctly?
Thanks for reporting this issue.
If you don't toggle the drawer closed on the links, does the page scroll to the anchor correctly?
No. Even by removing all the event callbacks, no scroll occurs by clicking the links. So,maybe it is a problem of the component itself
I played around with this today and it seems that the problem is the drawer itself wants to prevent scrolling of the page behind it by default (modal={true}
). It "releases" its scrolling lock on a couple of conditions:
Notably, isOpen
getting set to false should release the scroll lock... however isOpen
doesn't get set for 300ms after the open prop gets set to false, so there's this delay where the browser wants to scroll, but the drawer is still holding the scroll position (presumably to do it's drawer close animation)
which calls
The quick workaround here, is to set modal=False
in the rx.drawer.root
def lateral_menu():
return rx.drawer.root(
rx.drawer.trigger(rx.button("Open Drawer", on_click=DrawerState.toggle_drawer)),
rx.drawer.overlay(),
rx.drawer.portal(drawer_content()),
open=DrawerState.is_open,
direction="left",
modal=False,
)
If i do this, then your navigation links do work fine. The only downside to this approach is that while the drawer is open, the user can scroll the page behind the drawer. Whether this is a problem for you or not depends on your app.
I think it might be worth submitting an upstream bug or PR to vaul
itself, and see if they will instead link up the openProp
to their scroll prevention mechanism, which could allow the browser to beat the race, but no guarantee if this has the intended effect.
Thank you @masenf for working around this. Currently, this menu is only for mobile. I can use a non-modal option, but I hope there is a solution in future versions because this menu is quite common in different layouts. Sadly, I'm not an expert in JavaScript/typescript/react, so my contribution is to testing and reporting these problems.
Describe the bug I created a sidebar menu using the drawer component. After clicking any link inside it, the menu closes, but the scroll to the section doesn't work.
To Reproduce
Expected behavior After clicking any link in the menu do scroll to the proper section
Specifics (please complete the following information):
Thank you in advance