Dragging to close doesn't work on scrollable content

[buhodev]

I tried using the example from https://stackblitz.com/edit/vaul-svelte-scrollable-with-inputs in my phone and I couldn't drag the bottomsheet down from the scrollable content to close it.

Steps to reproduce it:

1. On your phone (or in mobile emulation from chrome devtools) go to https://stackblitz.com/edit/vaul-svelte-scrollable-with-inputs
2. Click on the button to open the drawer
3. Drag the bottomsheet from the scrollable content to close it
4. See error (it gets janky)

[huntabyte]

I'm able to reproduce this, so I will look into it, thanks for raising this issue!

[RickRyan26]

I too would love to see this fixed 😀

[huntabyte]

I'm not able to reproduce this using the latest version on my iPhone here:

https://vaul-svelte.com/examples

Don't use mobile emulation to try to reproduce bugs on mobile devices, as emulation doesn't always fire the appropriate events that would otherwise fire on true mobile devices.

[RickRyan26]

Safari finally wins one. I'm using a Pixel phone here.

Uploading screen-20240127-153117.mp4…

[buhodev]

It's not mobile emulation. It's chrome on Android. See screen recording:

https://github.com/huntabyte/vaul-svelte/assets/105121122/095e09c9-1c4e-49e9-b73d-ad1720c34f24

[buhodev]

Tested the original react example for comparison:

https://github.com/huntabyte/vaul-svelte/assets/105121122/75ac3d93-72c6-4d9b-a9a8-a403bcd86a63

[huntabyte]

Thanks for the videos and comparison! I'll keep digging into it!

[huntabyte]

The main difference between those with scroll and without is that the pointerup event isn't fired, which is what triggers the onRelease to actually close the drawer 🤔