I have a very particular use case: I need to have draggable elements inside the drawer. When an element starts being dragged, the drawer should close to reveal the drop area behind it. The problem is that the drag starts with a onPointerDown event and the onPointerUp event only happens after the drawer has already closed. This causes two problems:
If the user triggers a onPointerDown and immediately starts moving the pointer, the closing animation and the onDrag callback happen at the same time and causes a weird flickering;
Since onPointerUp is never triggered inside the drawer, the onRelease callback is never called and isDragging remains true. When I open the drawer a second time, onDrag will be called without I ever triggering the onPress callback.
Hey, @emilkowalski! Great work here.
I have a very particular use case: I need to have draggable elements inside the drawer. When an element starts being dragged, the drawer should close to reveal the drop area behind it. The problem is that the drag starts with a
onPointerDownevent and theonPointerUpevent only happens after the drawer has already closed. This causes two problems:onPointerDownand immediately starts moving the pointer, the closing animation and theonDragcallback happen at the same time and causes a weird flickering;onPointerUpis never triggered inside the drawer, theonReleasecallback is never called andisDraggingremainstrue. When I open the drawer a second time,onDragwill be called without I ever triggering theonPresscallback.We don't need to actually put draggable elements inside the drawer to see it. A button that closes the drawer with
onPointerDownis enough. Here's a reproduction: https://codesandbox.io/p/devbox/drawer-without-scale-forked-99shrnThere is also a recording of the problem:
https://github.com/emilkowalski/vaul/assets/23730762/20cd9850-3fcf-44eb-923f-7ae76ba2469b