pointer events passed to underlying elements after dragEnd (split second)
- Dominant language
- TypeScript
- Stars
- 17.6k
- Forks
- 924
- Avg merge
- 2d 10h
- Merged PRs (30d)
- 2
Description
We are using `@dnd-kit/react` with `useDraggable` on elements rendered over a canvas-like surface (similar to Miro/Figma). The canvas itself also supports pointer-based interactions (panning, item dragging, selection, etc.).
Observed behavior
During a drag operation, dnd-kit applies the following style to the draggable node:
* `position: fixed !important`
* `pointer-events: none !important`
This is expected while dragging.
However, after `onDragEnd` fires, there is a short delay before `pointer-events: none` is removed from the draggable element. During this window:
* `pointer-events` is still `none`.
* Pointer events (e.g., `pointerdown`, `click`) pass through to the underlying element.
This results in unintended behavior immediately after completing a drag. The effect is subtle but reproducible and leads to awkward UX in rare cases.
Expected behavior
* Once `onDragEnd` is triggered, the draggable should immediately resume handling pointer events.
* There should be no intermediate frame where pointer events pass through to underlying elements.
Actual behavior
* A brief delay exists between `onDragEnd` and the removal of `pointer-events: none`.
* Underlying interactive layers receive pointer events during that gap.
Reproduction
* visit one of the demos (i.e. https://experimental--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/docs/react-draggable--docs)
* Start dragging the item.
* Release pointer.
* Drag again (very fast interaction)
> I added a screencast where it is visible that in some cases the second drag does not happen since pointer events are still none. Instead the mouse moves away. (The video has three drags of which the second one is not dragging therefore it moves away and shows the pointer cursor: drag -> miss -> drag)
https://github.com/user-attachments/assets/2589dea5-f08e-4c14-aa60-27549eaba07a
It would be helpful to clarify whether this delay is intentional, needed or adjustable.
FYI we do not have animations on our draggable (no return to origin upon release)
Contributor guide
Assessment
This issue has not been assessed yet.