useOnSelectionChange returns an empty nodes array

[royassis]

Describe the Bug

I am using custom nodes.

Clicking a node fires UseOnSelectionChange but nodes array that being returned is empty.

const UseOnSelectionChange: FC<any> = (props: { setSelectedNodes: any }) => {
    useOnSelectionChange({
        onChange: ({ nodes }) => {
            console.log("useOnSelectionChange", nodes)
            props.setSelectedNodes(nodes)
        },
    });
    return null
}

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

As listed above

Expected behavior

Array is returned with selected nodes

Screenshots or Videos

No response

Platform

• OS: Windows
• Browser: Chrome
• Version: 11.10.4

Additional context

This only happens when Nodes {draggable:false}
Selection works if creating a bounding box (using shift+left clicking the mouse and dragging) that includes both handles of the custom node.
Same issue occurs when using the default node type.

[moklick]

could you try if it solves the issue if you memoize the onChange function with useCallback:

const UseOnSelectionChange: FC<any> = (props: { setSelectedNodes: any }) => {
  const onChange = useCallback(({ nodes }) => {
      console.log("useOnSelectionChange", nodes)
      props.setSelectedNodes(nodes)
  }, [props.setSelectedNodes]);

  useOnSelectionChange({ onChange });

  return null
}

[royassis]

Hey @moklick

I changed it to

const UseOnSelectionChange: FC<any> = (props: { setSelectedNodes: any }) => {
    
    useOnSelectionChange({
        onChange: useCallback(({ nodes }) => {
            console.log("useOnSelectionChange", nodes)
            props.setSelectedNodes(nodes)
        },[]),
    });
    
    return null
}

onChange is not defined in scope.

It didn't resolve the issue.

[Nicolas-PredictaLab]

Yup, +1 on this

[Nicolas-PredictaLab]

On my side it doesn't work when clicking nodes, it works when clicking edges and it works when selected at least two elements, by dragging or CMD+Click

[skspade]

+1 for me as well.

[markwatabe]

for me it is returning the previous selection, so my side panel is always seems one step behind in comparison to what is selected on the canvas. related?

[markwatabe]

ah, just realized my bug was on V11, and on V12 it works great.

[rob-gordon]

+1 here too, running 12.0.0-next.16

[moklick]

It works fine, but the UX is not great. In this example I am using useOnSelectionChange and all nodes have draggable: false: https://codesandbox.io/p/sandbox/compassionate-volhard-hdc99z?file=/src/App.tsx:28,11

The node doesn't get selected if the cursor moves 1px while clicking the node. In that case the pane gets dragged. Because the node is not draggable, the selectNodesOnDrag prop (which is true by default) doesn't work here.

[moklick]

@royassis @rob-gordon do you still encounter this issue? As explained above, I can't reproduce it.