isInteractive is preventing custom click handlers

I have a use-case where I want to disable the graph from being changed. (E.g: nodes being dragged) but I still want to be able to click them to trigger UI changes elsewhere (E.g: a sidebar being opened with node information).

I believe is-interactive is a good solution for this but the implementation of it is causing some issues. Because it’s setting pointer-events: none on the nodeWrapper, click handlers in custom nodes are not being triggered. I can override it by setting pointer-events: all on the inner element that I want to attach a click listener to but for some reason this prevents panning, zooming, … all interactivity when hovering on a node.

Steps to reproduce:

• Disable interactivity
• Adjust a node’s style to have pointer-events: all
• Notice that only on this node you will not be able to zoom/pan/…

My suggestion is to add a flag that only disables the dragging / modification of the graph but keeps all attached listeners active.

Another option could be to drive the interactivity from CSS and be able determine as the implementor which pointer-events: none | all | auto are getting set based on the class given to the parent graph.

[moklick]

Hey,

we just released v.4.0.0. There we dropped isInteractive and added nodesDraggable, nodesConnectable and elementsSelectable. This use case should be working with nodesDraggable = false and nodesConnectable and elementsSelectable = true. You can see a working example here: https://react-flow.netlify.app/interaction. Can you confirm @bartvanremortele ?

[moklick]

Good catch @emielwit! The bug should be fixed with version 4.2.2