vaul
vaul copied to clipboard
emilkowalski
Drawer drag issue on touchscreen
There seems to be an issue on touchscreen devices when working with scrollable content. If you drag the drawer down slightly, without closing it, and then scroll the content - everything scrolls around together. I'm not entirely sure what's causing it, but you can see it on the scrollable with inputs example
https://github.com/emilkowalski/vaul/assets/33671231/9f6fcb98-fe72-43ad-93d5-9b9c4210abbb
It doesn't happen on non-touchscreen devices.
It looks like the behavior is expected.
Hmm. I would expect a drawer with drag support to be almost exclusively for touchscreen use, so I would be surprised if this is expected behaviour as it renders the drawer unusable on touchscreen devices (phones) when using scrollable content.
I'm wondering whether the recently added features for configuring dragging may help, but I haven't managed to get it to work yet.
@apetta did you resolve this, I also have the same issue where the entire Drawer upp shift up or down prior to dragging when I first touch. The direction of the "shift" seems to be the same as the drag direction.
@apetta did you resolve this, I also have the same issue where the entire Drawer upp shift up or down prior to dragging when I first touch. The direction of the "shift" seems to be the same as the drag direction.
Unfortunately not!
Haven't had the opportunity to revisit it yet; will provide an update if I make any progress
I find this one option data-vaul-no-drag from here https://codesandbox.io/p/devbox/drawer-with-scale-forked-hwtfws?file=/app/my-drawer.tsx:42,20-42,37 and it was a solution for me, because i have a list of products in drawer. Now the scrolling fine and drawer stop moving
@apetta here is example with your content. Now it stop moving when your scroll this text and you can close it by thumb dragging
https://github.com/user-attachments/assets/e1a38a62-db8d-4d71-8f5a-6eddebf71a08