[Bug] Unable to stop node click propagation to prevent selection

When handling a click within a node, it’s not possible to prevent the “click” from selecting the node using event.stopPropagation() as one might expect.

It appears that both onDragStart and onDragStop (the latter when selectNodesOnDrag: false) will select the node.

Unfortunately, this has cost me a good few hours and I’m sure others might do the same.

---

Workaround

To work around this issue, it is necessary to block the mousedown event from propagating.

<button onClick={handleClick} onMouseDown={event => event.stopPropagation()}>

I can work with this for now, but it might be worth adding some documentation around this so this is less likely to be raised as an issue by others.

[justrhysism]

@moklick I didn’t. This wasn’t documented anywhere; at least, not anywhere obvious. I’ve updated the Codesandbox and can confirm adding the nodrag class to the button makes it work as expected.

[justrhysism]

I think it also needs to be re-titled, as I wasn’t trying to prevent dragging, I was looking to prevent selection. Reading the docs there wouldn’t have helped me as it didn’t present the answer to the question I had.