Merge pull request #4498 from xyflow/fix-pointer-capture

only capture pointer after valid selection has started

.changeset/perfect-spiders-bathe.md

@@ -0,0 +1,6 @@
+---
+'@xyflow/react': patch
+'@xyflow/svelte': patch
+---
+
+fix(pane) only capture pointer after a valid selection has started, fixes #4492

packages/react/src/container/Pane/index.tsx

@@ -120,7 +120,6 @@ export function Pane({
   const onPointerDown = (event: ReactPointerEvent): void => {
     const { resetSelectedElements, domNode, edgeLookup } = store.getState();
     containerBounds.current = domNode?.getBoundingClientRect();
-    (event.target as Element)?.setPointerCapture?.(event.pointerId);
 
     if (
       !elementsSelectable ||
@@ -132,6 +131,8 @@ export function Pane({
       return;
     }
 
+    (event.target as Element)?.setPointerCapture?.(event.pointerId);
+
     selectionStarted.current = true;
     selectionInProgress.current = false;
     edgeIdLookup.current = new Map();

packages/svelte/src/lib/container/Pane/Pane.svelte

@@ -92,7 +92,6 @@
 
   function onPointerDown(event: PointerEvent) {
     containerBounds = container.getBoundingClientRect();
-    (event.target as Element)?.setPointerCapture?.(event.pointerId);
 
     if (
       !elementsSelectable ||
@@ -104,6 +103,8 @@
       return;
     }
 
+    (event.target as Element)?.setPointerCapture?.(event.pointerId);
+
     const { x, y } = getEventPosition(event, containerBounds);
 
     unselectNodesAndEdges();