search

bkrem / react-d3-tree

:deciduous_tree: React component to create interactive D3 tree graphs
https://bkrem.github.io/react-d3-tree
MIT License
1.06k stars 268 forks source link

OnClick event in custom node element randomly stops working #458

Open Liu233w opened 1 year ago

Liu233w commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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