ui icon indicating copy to clipboard operation
ui copied to clipboard

[question] Can I controll Drawer component's drag action?

Open Luna-omni opened this issue 1 year ago • 1 comments

Hello, first of all, thank you for creating such a beautiful UI library :) Thanks to shadcn's consistent and sophisticated UI, my workload has been greatly reduced. I'm currently using the Drawer component provided by shadcn.

It seems that there are two ways for the user to close the drawer: by clicking on the background that's overlaid, or by dragging the top of the drawer downwards.

My question is whether there is a way to control the user's drag action.

What I want is to have the drawer only close when the user explicitly clicks a button. I've checked DialogPrimitive's DialogProps for onDrag?: (event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) => void; but I really don't know how to do it. I would be grateful for your help.

Luna-omni avatar Jan 15 '24 08:01 Luna-omni

I have the same issue using npm @react-google-maps/api in the Drawer component.

I have these options for the map: const options = { disableDefaultUI: true, // Disable all default UI controls fullscreenControl: false, // Disable fullscreen control streetViewControl: false, // Disable street view control zoomControl: false, // Disable zoom controls keyboardShortcuts: false, // Disable keyboard shortcuts gestureHandling: "greedy", };

When the user drags down on the map, the Drawer slides down an closes.

I've tried to modify or prevent every drag on click or touch event on many components and levels but could not find a solution.

bitdictator avatar Jan 28 '24 21:01 bitdictator

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.

shadcn avatar Feb 19 '24 23:02 shadcn