[experimental] event propagation is stopped - can not click on a button inside a draggable

[maxence-lefebvre]

Hello @clauderic, thank you so much for your slick library.

Context

Library	Version
@dnd-kit/react	0.0.6-beta-20241204184550
react	18.3.1
react-dom	18.3.1

Reproduction	URL
Repo	https://github.com/maxence-lefebvre/dndkit-repro
Live demo	https://maxence-lefebvre.github.io/dndkit-repro/

Issue

When implementing the experimental version, I stumbled upon something caused by the new design (having a DOM core library wrapped with React).

When having interactive elements using onPointerDown listeners inside a Draggable component, their listeners are never called (even when dragging is idle).

In the live demo, you can see that the first draggable's inner Button, bound on onPointerDown is never triggered, while the second one, bound on onPointerDownCapture is.

Analysis

This is caused because @dnd-kit's pointer sensor is bound to the HTML element while React's event handlers are bound to the root app element (root.render(<App />)) through Event Delegation.

The PointerSensor is stopping event propagation here:

dnd-kit/packages/dom/src/core/sensors/pointer/PointerSensor.ts

Line 128 in f3f05ba

event.stopImmediatePropagation();

It makes sense because we would expect the listeners to be called in the following order:

1. button.onPointerDownCapture
2. button.onPointerDown
3. parentDraggable.onPointerDown.

However, because React delegates events to root, they are called in that order:

1. button.onPointerDownCapture
2. parentDraggable.onPointerDown
3. button.onPointerDown.

The aforementioned stopped propagation is making it impossible to call button.onPointerDown

Follow-up

We are using another library (radix-ui primitives) which binds the dropdown trigger to onPointerDown. We can't objectively ask them to change their listeners to onPointerDownCapture to mitigate this design flaw.

What do you suggest a solution could be?
I can help with a PR with great pleasure.

Happy holidays,