fix(selection): dont render selection when another node gets selected

src/components/Nodes/wrapNode.tsx

@@ -51,6 +51,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     const updateNodeDimensions = useStoreActions((actions) => actions.updateNodeDimensions);
     const setSelectedElements = useStoreActions((actions) => actions.setSelectedElements);
     const updateNodePos = useStoreActions((actions) => actions.updateNodePos);
+    const unsetNodesSelection = useStoreActions((actions) => actions.unsetNodesSelection);
 
     const nodeElement = useRef<HTMLDivElement>(null);
     const [offset, setOffset] = useState({ x: 0, y: 0 });
@@ -104,6 +105,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       (event: MouseEvent) => {
         if (!isDraggable) {
           if (isSelectable) {
+            unsetNodesSelection();
             setSelectedElements({ id: node.id, type: node.type } as Node);
           }
 
@@ -132,6 +134,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         }
 
         if (selectNodesOnDrag && isSelectable) {
+          unsetNodesSelection();
           setSelectedElements({ id: node.id, type: node.type } as Node);
         }
       },

src/components/NodesSelection/index.tsx

@@ -25,6 +25,7 @@ export default ({
 }: NodesSelectionProps) => {
   const [tX, tY, tScale] = useStoreState((state) => state.transform);
   const selectedNodesBbox = useStoreState((state) => state.selectedNodesBbox);
+  const selectionActive = useStoreState((state) => state.selectionActive);
   const selectedElements = useStoreState((state) => state.selectedElements);
   const snapToGrid = useStoreState((state) => state.snapToGrid);
   const snapGrid = useStoreState((state) => state.snapGrid);
@@ -34,10 +35,6 @@ export default ({
 
   const grid = (snapToGrid ? snapGrid : [1, 1])! as [number, number];
 
-  if (!selectedElements) {
-    return null;
-  }
-
   const selectedNodes = useMemo(
     () =>
       selectedElements
@@ -109,6 +106,10 @@ export default ({
     [selectedNodesBbox]
   );
 
+  if (!selectedElements || selectionActive) {
+    return null;
+  }
+
   return (
     <div className="react-flow__nodesselection" style={style}>
       <ReactDraggable

src/store/index.ts

@@ -312,9 +312,9 @@ export const storeModel: StoreModel = {
   }),
 
   unsetUserSelection: action((state) => {
-    const selectedNodes = getNodesInside(state.nodes, state.userSelectionRect, state.transform);
+    const selectedNodes = state.selectedElements?.filter(isNode);
 
-    if (!selectedNodes.length) {
+    if (!selectedNodes) {
       state.selectionActive = false;
       state.userSelectionRect = { ...state.userSelectionRect, draw: false };
       state.nodesSelectionActive = false;