From 85c8d2ddc0612f9831d55f074c1e0d4a4ceca814 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Jul 2024 14:07:34 +0200
Subject: [PATCH] fix(core): handle pointer capture for selection on drag
 (#1543)

* fix(core): handle pointer capture for selection on drag

* chore(changeset): add
---
 .changeset/tiny-peaches-dance.md          | 5 +++++
 packages/core/src/container/Pane/Pane.vue | 9 ++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/tiny-peaches-dance.md

diff --git a/.changeset/tiny-peaches-dance.md b/.changeset/tiny-peaches-dance.md
new file mode 100644
index 000000000..5c88bb18b
--- /dev/null
+++ b/.changeset/tiny-peaches-dance.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Handle pointer capture for selection on drag
diff --git a/packages/core/src/container/Pane/Pane.vue b/packages/core/src/container/Pane/Pane.vue
index 660c6a242..5f837812e 100644
--- a/packages/core/src/container/Pane/Pane.vue
+++ b/packages/core/src/container/Pane/Pane.vue
@@ -114,7 +114,7 @@ function onWheel(event: WheelEvent) {
 
 function onPointerDown(event: PointerEvent) {
   containerBounds.value = vueFlowRef.value?.getBoundingClientRect()
-  container.value?.setPointerCapture(event.pointerId)
+  ;(event.target as Element)?.setPointerCapture?.(event.pointerId)
 
   if (
     !elementsSelectable.value ||
@@ -147,6 +147,7 @@ function onPointerDown(event: PointerEvent) {
   }
 
   userSelectionActive.value = true
+  nodesSelectionActive.value = false
 
   emits.selectionStart(event)
 }
@@ -215,7 +216,7 @@ function onPointerUp(event: PointerEvent) {
     return
   }
 
-  container.value?.releasePointerCapture(event.pointerId)
+  ;(event.target as Element)?.releasePointerCapture(event.pointerId)
 
   // We only want to trigger click functions when in selection mode if
   // the user did not move the mouse.
@@ -223,7 +224,9 @@ function onPointerUp(event: PointerEvent) {
     onClick(event)
   }
 
-  nodesSelectionActive.value = prevSelectedNodesCount.value > 0
+  if (prevSelectedNodesCount.value > 0) {
+    nodesSelectionActive.value = true
+  }
 
   resetUserSelection()