Anchor tag hyperlink to page fragments not working on Drawer (Vaul)

[subhranshudas]

Guys/Gals,

Following is my setup

• Next JS - 14
• UI lib - https://ui.shadcn.com/docs/components/drawer (from vaul)

I have a responsive navbar, on desktop sizes show the navlinks in the middle, and on smaller/mobile sizes show them on the drawer when clicked on the hamburger menu icon.

Now my navlinks when clicked takes the user to a fragment on the same page. ( with #fragmentID)

The issue I am facing is In the Mobile Nav Drawer, I am wrapping the "a" tag with DrawerClose to trigger a close. When i click on a link the Drawer closes but the hyperlink section is not getting scrolled to.

I feel the hyperlink click event is somehow getting hijacked by Vaul Drawer. This issue doesn't happen in https://ui.shadcn.com/docs/components/sheet

Any help is appreciated!

Regards.

[KyrillGobber]

I have the same problem here. I tried working around this by programmatically closing the drawer (open and onOpenChange in the drawer), and navigating to the id by selecting the element (getElementById) and scroll to it with .scrollIntoView(), but no dice, it just won't work.

I see that the url gets set correctly, it just won't scroll. I guess the drawer overlays itself on everything, and the id's can't be found below it.

I guess I'm also switching to the sheet then. Thanks for the tipp.

[KyrillGobber]

Well, setTimout(element.scrollIntoView(), 350) after closing the drawer works of course. But that's an ugly workaround.

[subhranshudas]

Hey @KyrillGobber i am yet to try out the setTimeout with scrollIntoView, but yes you are right thats an ugly hack. Will update this thread if i find something more concise. Thanks!

[AuJezus]

I have the same issue, any updates?

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.