useDraggable onMouseDown handler swallows element's onClick event

Given the code below, the handleClick is never called. Removing {…listeners} fixes the issue. It appears the listeners.onMouseDown prevents propagation of the event.

<li onClick={handleClick} ref={setNodeRef} {...attributes}> {...listeners} <Content /> </li>

I’ve tried wrapping it with a div, wrapping Content with a div etc.

Any advice / pointers would be greatly appreciated.

[clauderic]

Set an activationConstraint on the Mouse or Pointer sensor that is either based on distance or delay: https://docs.dndkit.com/api-documentation/sensors/pointer#activation-constraints

useSensor(PointerSensor, {
  activationConstraint: {
    distance: 10,
  },
});

[shauntrennery]

@clauderic for your reference: https://codesandbox.io/s/dndkit-k75i3?file=/index.tsx

It works 100% as expected. I’m trying to see what I’m doing wrong in my project.

Created a NextJS version as I assumed it could be related to SSR. Works as expected too. https://codesandbox.io/s/dndkitnext-tp03l