diff --git a/packages/react/src/components/Edges/wrapEdge.tsx b/packages/react/src/components/Edges/wrapEdge.tsx index 92aaada6..ad1d8f2a 100644 --- a/packages/react/src/components/Edges/wrapEdge.tsx +++ b/packages/react/src/components/Edges/wrapEdge.tsx @@ -82,15 +82,25 @@ export default (EdgeComponent: ComponentType) => { } const onEdgeClick = (event: React.MouseEvent): void => { - const { edges, addSelectedEdges } = store.getState(); + const { edges, addSelectedEdges, unselectNodesAndEdges, multiSelectionActive } = store.getState(); + const edge = edges.find((e) => e.id === id); + + if (!edge) { + return; + } if (isSelectable) { store.setState({ nodesSelectionActive: false }); - addSelectedEdges([id]); + + if (edge.selected && multiSelectionActive) { + unselectNodesAndEdges({ nodes: [], edges: [edge] }); + edgeRef.current?.blur(); + } else { + addSelectedEdges([id]); + } } if (onClick) { - const edge = edges.find((e) => e.id === id)!; onClick(event, edge); } }; diff --git a/packages/react/src/components/Nodes/utils.ts b/packages/react/src/components/Nodes/utils.ts index 3c1299e9..a70ccd34 100644 --- a/packages/react/src/components/Nodes/utils.ts +++ b/packages/react/src/components/Nodes/utils.ts @@ -48,7 +48,7 @@ export function handleNodeClick({ if (!node.selected) { addSelectedNodes([id]); } else if (unselect || (node.selected && multiSelectionActive)) { - unselectNodesAndEdges({ nodes: [node] }); + unselectNodesAndEdges({ nodes: [node], edges: [] }); requestAnimationFrame(() => nodeRef?.current?.blur()); }