[feat] Introduce prop to disable drag on drawer content

[soham2k06]

Currently, It is being dragged even if we scroll or drag in content.

It breaks and doesn't work smooth when we contain scrolls inside drawer content. It should be referenced by Instagram drawers.

Additionally, I would like to work on the issue.

[emilkowalski]

Wdym by draged even if we scroll or drag in content? You are only able to drag it once you are scrolled all the way to the top.

[vanquishkuso]

Might be or not be the same issue I have, but in my project I have a "slide to confirm" field which makes the drawer slide up and down while I'm dragging to confirm. For a better UX It would be great if it was possible to make parts of the Drawer children not draggable.

[JonathanDelm]

Another example would be drag-and-drop elements (like those of dnd-kit) who also look for drag events, like the video below.

https://github.com/emilkowalski/vaul/assets/25964886/1950f3b8-d46d-4c33-bc3a-2bf54b1f1075

I agree with @vanquishkuso that making the drawer ignore dragging events only in the drag-and-drop zone would be the best solution, but #182 should already be a decent alternative. Currently my only other option is to disable all dragging and close the drawer via a button - which kind of defeats the purpose of the drawer.

[emilkowalski]

Thanks for bringing this up. Would #182 be enough or would you also want an option to disable dragging in an element by adding a data attribute for example? Curious about what you guys think.

[JonathanDelm]

No problem, love the component, great work.

In my opinion, disabling the dragging in an element would be the most intuitive and complete solution. As a user, I do not expect the dragging functionality of the drawer to change depending on whether or not there is another element inside the drawer that can be dragged.

Therefore, if #182 is the only available solution, anyone with a single draggable element in any of their drawers would need to use this only-drag-by-handle style for all their drawers - even those without elements that need drag events - to ensure consistency throughout their application. This is definitely a better alternative to the current solution, but it would still be unfortunate to lose such an important UX element of the drawer.

[emilkowalski]

Added in #250, will update the readme accordingly.

[sethhen]

THANK YOU! Spent too long trying to get a hacky solution working

[Johnrobmiller]

This feature doesn't check the parents of the clicked/touched element to see if it has the data-vaul-no-drag attribute. So for complex, deeply nested components where you can't add that class to every single child recursively, this new feature is not making the element non-draggable as it should.

It ought to check to see if the clicked/touched element has a parent with that attribute, and if it does, return early.

For example, I'm using the wavesurfer library to display some audio. I don't want the drawer to move while the user is seeking on the wavesurfer. However, the canvas for the audio player is being generated by the wavesurfer library itself, and I do not have access to it. I cannot put a data-vaul-no-drag attribute on it. And so for all intents and purposes, for this intance it is impossible to stop the drawer from moving around while seeking the audio.

[fabiodinota]

I'm having the same issue as @Johnrobmiller, can't just put data-vaul-no-drag attribute on parent. Any workaround for this?

[Poylar]

this feature will be release in new version and already merged https://github.com/emilkowalski/vaul/pull/267