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] 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.