clauderic / clauderic/dnd-kit

pointer events passed to underlying elements after dragEnd (split second)

Open
#1,897 1 comment 0 reactions 0 assignees View on GitHub
bug dom react triage:done
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.