ui icon indicating copy to clipboard operation
ui copied to clipboard

[bug]: Can't scroll to a section with an id using Link comp inside both Sheet and Drawer

Open ahmedkhabar opened this issue 1 year ago • 3 comments

Describe the bug

I'm working on a landing page and I want to add the posibility to navigate between page sections using links and sections Id, but when I start working on responsive I used sheet and when I add links inside it, when the sheet closed I had an expected scrolling to top. So I try to use Drawer insted but drawer doesn't scroll at all. Screenshot (54) Screenshot (55)

Affected component/components

Drawer, Sheet

How to reproduce

  1. Create a page and include some sections with id.
  2. Create a sidebar using sheet or drawer
  3. Add some links inside them and in the href add #section_id, and each link should be inside a DrawerClose or SheetClose

Source Code Issue Link

https://github.com/ahmedkhabar/shadcn-issue

Logs

No response

System Info

Windows 10 64 bit
Microsoft Edge
NextJS 14
App Router

Before submitting

  • [X] I've made research efforts and searched the documentation
  • [X] I've searched for existing issues

ahmedkhabar avatar Apr 19 '24 11:04 ahmedkhabar

+1

hrishikeshmane avatar May 12 '24 01:05 hrishikeshmane

@ahmedkhabar how did you fix this issue?

hrishikeshmane avatar May 12 '24 01:05 hrishikeshmane

I shared the solution for that here: https://github.com/shadcn-ui/ui/discussions/2127#discussioncomment-9168116

ahmedkhabar avatar May 19 '24 11:05 ahmedkhabar

I shared the solution for that here: #2127 (comment)

Does this solution also work for the Drawer? I tried it, but my page still doesn't scroll.

dpkmi avatar May 29 '24 08:05 dpkmi

I shared the solution for that here: #2127 (comment)

don't work for the Drawer

tittobreno avatar May 30 '24 06:05 tittobreno

I shared the solution for that here: #2127 (comment)

don't work for the Drawer

I've found a fix for the drawer.

What I did was a bit overkill. I don't think it was necessary, but the magic is using a delay. I created a context provider. But I think this code can help people who want a drawer to be working with scroll to section.

See code below:

Scherm­afbeelding 2024-05-30 om 10 22 46 Scherm­afbeelding 2024-05-30 om 10 22 55 Scherm­afbeelding 2024-05-30 om 10 23 10 Scherm­afbeelding 2024-05-30 om 10 23 19

dpkmi avatar May 30 '24 08:05 dpkmi