From ddeb70a08f2c3998e292fec7dc79a5b935783c87 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 30 Mar 2022 18:56:32 +0200
Subject: [PATCH] fix: force focus into node selection

---
 .../components/NodesSelection/NodesSelection.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/package/src/components/NodesSelection/NodesSelection.vue b/package/src/components/NodesSelection/NodesSelection.vue
index ad6fbb41..ebda4ca9 100644
--- a/package/src/components/NodesSelection/NodesSelection.vue
+++ b/package/src/components/NodesSelection/NodesSelection.vue
@@ -15,8 +15,10 @@ watch(selectedNodesBBox, (v) => (store.selectedNodesBbox = v))
 const onStart: DraggableEventListener = ({ event }) =>
   store.hooks.selectionDragStart.trigger({ event, nodes: store.getSelectedNodes })
 const onDrag: DraggableEventListener = ({ event, data: { deltaX, deltaY } }) => {
-  store.hooks.selectionDrag.trigger({ event, nodes: store.getSelectedNodes })
-  store.updateNodePosition({ diff: { x: deltaX, y: deltaY }, dragging: true })
+  nextTick(() => {
+    store.hooks.selectionDrag.trigger({ event, nodes: store.getSelectedNodes })
+    store.updateNodePosition({ diff: { x: deltaX, y: deltaY }, dragging: true })
+  })
 }
 const onStop: DraggableEventListener = ({ event }) => {
   store.hooks.selectionDragStop.trigger({ event, nodes: store.getSelectedNodes })
@@ -29,6 +31,12 @@ const scale = controlledComputed(
   () => store.transform[2],
   () => store.transform[2],
 )
+const scaleDebounced = debouncedRef(scale, 5)
+
+const el = templateRef<HTMLDivElement>('el', null)
+onMounted(() => {
+  el.value.click()
+})
 </script>
 <script lang="ts">
 export default {
@@ -36,11 +44,11 @@ export default {
 }
 </script>
 <template>
-  <div class="vue-flow__nodesselection vue-flow__container" :class="store.noPanClassName" :style="{ transform }">
+  <div ref="el" class="vue-flow__nodesselection vue-flow__container" :class="store.noPanClassName" :style="{ transform }">
     <DraggableCore
       :grid="store.snapToGrid ? store.snapGrid : undefined"
       :enable-user-select-hack="false"
-      :scale="scale"
+      :scale="scaleDebounced"
       @start="onStart"
       @move="onDrag"
       @stop="onStop"