From 4062a24add46bdd43e589c33f079b7b786fef3cb Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 10 Jul 2024 14:14:24 +0200
Subject: [PATCH 1/2] fix(selection): handle pointer capture for
 selectionOnDrag closes #4418

---
 packages/react/src/container/Pane/index.tsx        | 9 ++++++---
 packages/svelte/src/lib/container/Pane/Pane.svelte | 4 ++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx
index 3a623372..a0bd5ba3 100644
--- a/packages/react/src/container/Pane/index.tsx
+++ b/packages/react/src/container/Pane/index.tsx
@@ -117,7 +117,7 @@ export function Pane({
   const onPointerDown = (event: ReactPointerEvent): void => {
     const { resetSelectedElements, domNode, edgeLookup } = store.getState();
     containerBounds.current = domNode?.getBoundingClientRect();
-    container.current?.setPointerCapture(event.pointerId);
+    (event.target as Element)?.setPointerCapture?.(event.pointerId);
 
     if (
       !elementsSelectable ||
@@ -222,7 +222,8 @@ export function Pane({
     if (event.button !== 0) {
       return;
     }
-    container.current?.releasePointerCapture(event.pointerId);
+
+    (event.target as Element)?.releasePointerCapture?.(event.pointerId);
     const { userSelectionRect } = store.getState();
     // We only want to trigger click functions when in selection mode if
     // the user did not move the mouse.
@@ -230,7 +231,9 @@ export function Pane({
       onClick?.(event);
     }
 
-    store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 });
+    if (prevSelectedNodesCount.current > 0) {
+      store.setState({ nodesSelectionActive: true });
+    }
 
     resetUserSelection();
     onSelectionEnd?.(event);
diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte
index e95ea563..0856381a 100644
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/packages/svelte/src/lib/container/Pane/Pane.svelte
@@ -92,7 +92,7 @@
 
   function onPointerDown(event: PointerEvent) {
     containerBounds = container.getBoundingClientRect();
-    container.setPointerCapture(event.pointerId);
+    (event.target as Element)?.setPointerCapture?.(event.pointerId);
 
     if (
       !elementsSelectable ||
@@ -174,7 +174,7 @@
       return;
     }
 
-    container.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.

From 1bda24519658b4aaed6d4abf9e7e9d096e193b5b Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 10 Jul 2024 14:20:23 +0200
Subject: [PATCH 2/2] chore(changeset): add

---
 .changeset/nasty-shoes-promise.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/nasty-shoes-promise.md

diff --git a/.changeset/nasty-shoes-promise.md b/.changeset/nasty-shoes-promise.md
new file mode 100644
index 00000000..d96b35db
--- /dev/null
+++ b/.changeset/nasty-shoes-promise.md
@@ -0,0 +1,6 @@
+---
+'@xyflow/react': patch
+'@xyflow/svelte': patch
+---
+
+fix(selection): handle pointer capture for selectionOnDrag