fix(nodes): blur when node gets unselected closes #2887, closes #2886

packages/core/src/components/Nodes/utils.ts

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import { MouseEvent, RefObject } from 'react';
 import { StoreApi } from 'zustand';
 
 import { getDimensions } from '../../utils';
@@ -58,6 +58,7 @@ export function handleNodeClick({
   id,
   store,
   unselect = false,
+  nodeRef,
 }: {
   id: string;
   store: {
@@ -65,6 +66,7 @@ export function handleNodeClick({
     setState: StoreApi<ReactFlowState>['setState'];
   };
   unselect?: boolean;
+  nodeRef?: RefObject<HTMLDivElement>;
 }) {
   const { addSelectedNodes, unselectNodesAndEdges, multiSelectionActive, nodeInternals } = store.getState();
   const node = nodeInternals.get(id)!;
@@ -75,5 +77,7 @@ export function handleNodeClick({
     addSelectedNodes([id]);
   } else if (unselect || (node.selected && multiSelectionActive)) {
     unselectNodesAndEdges({ nodes: [node] });
+
+    requestAnimationFrame(() => nodeRef?.current?.blur());
   }
 }

packages/core/src/components/Nodes/wrapNode.tsx

@@ -74,6 +74,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
         handleNodeClick({
           id,
           store,
+          nodeRef,
         });
       }
 
@@ -90,13 +91,12 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
 
       if (elementSelectionKeys.includes(event.key) && isSelectable) {
         const unselect = event.key === 'Escape';
-        if (unselect) {
-          nodeRef.current?.blur();
-        }
+
         handleNodeClick({
           id,
           store,
           unselect,
+          nodeRef,
         });
       } else if (
         !disableKeyboardA11y &&

packages/core/src/hooks/useDrag/index.ts

@@ -153,6 +153,7 @@ function useDrag({
               handleNodeClick({
                 id: nodeId,
                 store,
+                nodeRef: nodeRef as RefObject<HTMLDivElement>,
               });
             }