fix(core): blur node after unselect

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/core/src/components/Nodes/NodeWrapper.vue

@@ -212,7 +212,15 @@ function onDoubleClick(event: MouseEvent) {
 
 function onSelectNode(event: MouseEvent) {
   if (selectable && (!selectNodesOnDrag || !draggable)) {
-    handleNodeClick(node, multiSelectionActive, addSelectedNodes, removeSelectedNodes, $$(nodesSelectionActive))
+    handleNodeClick(
+      node,
+      multiSelectionActive,
+      addSelectedNodes,
+      removeSelectedNodes,
+      $$(nodesSelectionActive),
+      false,
+      nodeElement.value!,
+    )
   }
 
   emit.click({ event, node, connectedEdges })
@@ -228,7 +236,15 @@ function onKeyDown(event: KeyboardEvent) {
       nodeElement.value?.blur()
     }
 
-    handleNodeClick(node, multiSelectionActive, addSelectedNodes, removeSelectedNodes, $$(nodesSelectionActive), unselect)
+    handleNodeClick(
+      node,
+      multiSelectionActive,
+      addSelectedNodes,
+      removeSelectedNodes,
+      $$(nodesSelectionActive),
+      unselect,
+      nodeElement.value!,
+    )
   } else if (!disableKeyboardA11y && draggable && node.selected && arrowKeyDiffs[event.key]) {
     $$(ariaLiveMessage).value = `Moved selected node ${event.key.replace('Arrow', '').toLowerCase()}. New position, x: ${~~node
       .position.x}, y: ${~~node.position.y}`

packages/core/src/composables/useDrag.ts

@@ -142,7 +142,15 @@ function useDrag(params: UseDragParams) {
               }
 
               if (node && selectable && selectNodesOnDrag) {
-                handleNodeClick(node, multiSelectionActive, addSelectedNodes, removeSelectedElements, $$(nodesSelectionActive))
+                handleNodeClick(
+                  node,
+                  multiSelectionActive,
+                  addSelectedNodes,
+                  removeSelectedElements,
+                  $$(nodesSelectionActive),
+                  false,
+                  el as HTMLDivElement,
+                )
               }
 
               const pointerPos = getPointerPosition(event)

packages/core/src/utils/node.ts

@@ -31,6 +31,7 @@ export function handleNodeClick(
   removeSelectedNodes: Actions['removeSelectedNodes'],
   nodesSelectionActive: Ref<boolean>,
   unselect = false,
+  nodeEl: HTMLDivElement,
 ) {
   nodesSelectionActive.value = false
 
@@ -38,5 +39,7 @@ export function handleNodeClick(
     addSelectedNodes([node])
   } else if (unselect || (node.selected && multiSelectionActive)) {
     removeSelectedNodes([node])
+
+    nextTick(nodeEl.blur)
   }
 }