useOnSelectionChange Behavior

[small thunder]

I’m either running into some odd behavior with the useOnSelectionChange hook or I don’t understand how it works. Based on the documentation, I’m expecting this hook to fire whenever a node or edge is selected in a flow.

To test, I implemented the example from the documentation using default nodes/edges and selecting between them. I’m never seeing the edges register as selected even though they are “visually” selected.

I was getting this same behavior on my custom nodes and edges where node selection was working as expected, but edge selection seems to never register. I can recreate the source code if required, but I’m thinking I may not understand how this hook actually works.

[eager kernel]

To get this hook to work(or most of the utils to work), you have to use to controlled behaviour of ReactFlow i.e using nodes, edges, onNodesChange, onEdgesChange props of Reactflow, not defaultNodes, defaultEdges.

[small thunder]

Thank you for the prompt reply, I'm going to post the actual code I was trying to implement in hopes that it will help clarify. I'm using custom nodes/edges and trying to use controlled behavior (hydrating my Zustand store on flow changes). Based on your response, I think I'm missing the onEdgesChange handler, but I was unaware this is required for selection changes as well. Either way, take a look at the attachment and let me know

[eager kernel]

Have you tried adding onEdgesChange and seeing if it works?

[small thunder]

I'm doing so now, but running into an error with my MFTEdge type not being compatible with BaseEdge. I'm checking my type/schema right now for why the 'data' property isn't working the same way as my custom node types

[small thunder]

'data' needs to be options on edges and not on nodes 🙂

making updates and testing again... will update soon

[small thunder]

This works as expected now. I had not properly implemented the applyEdgeChanges util. Now that I have this, all is working as expected!

Thank you for helping me slow down and read the documentation ☺️