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

* fix(core): handle pointer capture for selection on drag * chore(changeset): add
bcakmakoglu · Jul 15, 2024 · 85c8d2d · 85c8d2d
1 parent de75620
commit 85c8d2d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/.changeset/tiny-peaches-dance.md 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
@@ -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,15 +216,17 @@ 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.
   if (!userSelectionActive.value && userSelectionRect.value && event.target === container.value) {
     onClick(event)
   }
 
-  nodesSelectionActive.value = prevSelectedNodesCount.value > 0
+  if (prevSelectedNodesCount.value > 0) {
+    nodesSelectionActive.value = true
+  }
 
   resetUserSelection()