OnClick event in custom node element randomly stops working

[Liu233w]

Are you reporting a bug, or opening a feature request?

A bug

What is the actual behavior/output?

Please check this sandbox: https://codesandbox.io/s/onclick-event-not-triggered-qbw4dr?file=/src/App.js If you click multiple elements one after another (e.g. click root node, then click first child, then click root node, ..., repeat multiple times), there is a chance that the onClick event not triggered when you click a node.

What version of react-d3-tree are you using?

3.5.2

[Liu233w]

After experimenting on the source code, I found that it was caused by bindZoomListener, and the problem is gone if if (!zoomable) return; is added before the svg.call. Probably because clicking event is somehow conflicted with the d3-zoom.

[jp1357]

I had the exact same problem. And it is indeed in the zoomListener. But the reason I found out is that it is simply too sensitive. So as soon as you click your mouse you might slightly move and then it is not seen as click but as drag or zoom movement. The solution for me was setting the clickDistance to a number higher than 0 - I placed at 10 the same as with the touchDistance

But this react-d3-tree has not yet forwarded the d3-zoom clickDistance property, whence I made a Pull Request for it https://github.com/bkrem/react-d3-tree/pull/466