From 738320038839bf557f1e9a729294b66917748f0c Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 6 Mar 2023 16:35:24 +0100
Subject: [PATCH 1/2] fix(nodes): blur when node gets unselected closes #2887,
 closes #2886

---
 packages/core/src/components/Nodes/utils.ts     | 6 +++++-
 packages/core/src/components/Nodes/wrapNode.tsx | 6 +++---
 packages/core/src/hooks/useDrag/index.ts        | 1 +
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/components/Nodes/utils.ts b/packages/core/src/components/Nodes/utils.ts
index dca9f297..174b1be7 100644
--- a/packages/core/src/components/Nodes/utils.ts
+++ b/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());
   }
 }
diff --git a/packages/core/src/components/Nodes/wrapNode.tsx b/packages/core/src/components/Nodes/wrapNode.tsx
index f56f117b..6f95dbdd 100644
--- a/packages/core/src/components/Nodes/wrapNode.tsx
+++ b/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 &&
diff --git a/packages/core/src/hooks/useDrag/index.ts b/packages/core/src/hooks/useDrag/index.ts
index 22d06daf..8821ab4a 100644
--- a/packages/core/src/hooks/useDrag/index.ts
+++ b/packages/core/src/hooks/useDrag/index.ts
@@ -153,6 +153,7 @@ function useDrag({
               handleNodeClick({
                 id: nodeId,
                 store,
+                nodeRef: nodeRef as RefObject<HTMLDivElement>,
               });
             }
 

From 83fc467545527729633e817dbccfe59d0040da4b Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 6 Mar 2023 16:36:18 +0100
Subject: [PATCH 2/2] chore(changeset): add

---
 .changeset/khaki-spoons-cheer.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/khaki-spoons-cheer.md

diff --git a/.changeset/khaki-spoons-cheer.md b/.changeset/khaki-spoons-cheer.md
new file mode 100644
index 00000000..135186a2
--- /dev/null
+++ b/.changeset/khaki-spoons-cheer.md
@@ -0,0 +1,5 @@
+---
+'@reactflow/core': patch
+---
+
+fix(nodes): blur when node gets unselected