From f29adb83538aca0b8c04baa7f532c9ad65a2a656 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Tue, 28 Oct 2025 12:20:47 +0100
Subject: [PATCH] only prevent pointer events when starting selection box on
 top of node

---
 examples/react/src/examples/Figma/index.tsx    |  5 ++++-
 packages/react/src/container/Pane/index.tsx    | 10 ++++------
 .../svelte/src/lib/container/Pane/Pane.svelte  | 18 ++++++++----------
 3 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/examples/react/src/examples/Figma/index.tsx b/examples/react/src/examples/Figma/index.tsx
index 28e21179..2ac0d6b6 100644
--- a/examples/react/src/examples/Figma/index.tsx
+++ b/examples/react/src/examples/Figma/index.tsx
@@ -30,7 +30,7 @@ const BasicFlow = () => {
     <ReactFlow
       defaultNodes={initialNodes}
       defaultEdges={initialEdges}
-      selectionOnDrag
+      selectionOnDrag={true}
       selectionMode={SelectionMode.Partial}
       panOnDrag={panOnDrag}
       panOnScroll
@@ -47,6 +47,9 @@ const BasicFlow = () => {
       onPaneClick={(e) => console.log('pane click', e)}
       onSelectionStart={(e) => console.log('on selection start', e)}
       onSelectionEnd={(e) => console.log('on selection end', e)}
+      onPointerDown={(e) => console.log('pointer down', e)}
+      onPointerUp={(e) => console.log('pointer up', e)}
+      onClick={(e) => console.log('click', e)}
     >
       <Background variant={BackgroundVariant.Cross} />
       <Controls />
diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx
index 8a6f032b..4c40afd6 100644
--- a/packages/react/src/container/Pane/index.tsx
+++ b/packages/react/src/container/Pane/index.tsx
@@ -86,7 +86,6 @@ export function Pane({
 
   // Used to prevent click events when the user lets go of the selectionKey during a selection
   const selectionInProgress = useRef<boolean>(false);
-  const selectionStarted = useRef<boolean>(false);
 
   const onClick = (event: ReactMouseEvent) => {
     // We prevent click events when the user let go of the selectionKey during a selection
@@ -140,7 +139,6 @@ export function Pane({
 
     (event.target as Partial<Element>)?.setPointerCapture?.(event.pointerId);
 
-    selectionStarted.current = true;
     selectionInProgress.current = false;
 
     const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
@@ -156,10 +154,12 @@ export function Pane({
       },
     });
 
-    if (!eventTargetIsContainer || paneClickDistance === 0) {
+    if (!eventTargetIsContainer) {
       event.stopPropagation();
       event.preventDefault();
+    }
 
+    if (!eventTargetIsContainer || paneClickDistance === 0 || !selectionOnDrag) {
       resetSelectedElements();
 
       onSelectionStart?.(event);
@@ -252,7 +252,7 @@ export function Pane({
   };
 
   const onPointerUp = (event: ReactPointerEvent) => {
-    if (event.button !== 0 || !selectionStarted.current) {
+    if (event.button !== 0) {
       return;
     }
 
@@ -275,8 +275,6 @@ export function Pane({
     if (selectionInProgress.current) {
       onSelectionEnd?.(event);
     }
-
-    selectionStarted.current = false;
   };
 
   const draggable = panOnDrag === true || (Array.isArray(panOnDrag) && panOnDrag.includes(0));
diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte
index 45547737..cb5595b6 100644
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/packages/svelte/src/lib/container/Pane/Pane.svelte
@@ -77,19 +77,18 @@
 
   // Used to prevent click events when the user lets go of the selectionKey during a selection
   let selectionInProgress = false;
-  let selectionStarted = false;
 
   // We start the selection process when the user clicks down on the pane
   function onPointerDownCapture(event: PointerEvent) {
     containerBounds = container?.getBoundingClientRect();
 
+    const eventTargetIsContainer = event.target === container;
+
     const isNoKeyEvent =
-      event.target !== container && !!(event.target as HTMLElement).closest('.nokey');
+      !eventTargetIsContainer && !!(event.target as HTMLElement).closest('.nokey');
 
     const isSelectionActive =
-      (selectionOnDrag && container === event.target) ||
-      !selectionOnDrag ||
-      store.selectionKeyPressed;
+      (selectionOnDrag && eventTargetIsContainer) || !selectionOnDrag || store.selectionKeyPressed;
 
     if (
       !store.elementsSelectable ||
@@ -105,7 +104,6 @@
 
     (event.target as Partial<Element>)?.setPointerCapture?.(event.pointerId);
 
-    selectionStarted = true;
     selectionInProgress = false;
 
     const { x, y } = getEventPosition(event, containerBounds);
@@ -119,10 +117,12 @@
       y
     };
 
-    if (event.target !== container || paneClickDistance === 0) {
+    if (!eventTargetIsContainer) {
       event.stopPropagation();
       event.preventDefault();
+    }
 
+    if (paneClickDistance === 0 || !selectionOnDrag) {
       store.unselectNodesAndEdges();
 
       onselectionstart?.(event);
@@ -203,7 +203,7 @@
   }
 
   function onPointerUp(event: PointerEvent) {
-    if (event.button !== 0 || !selectionStarted) {
+    if (event.button !== 0) {
       return;
     }
 
@@ -225,8 +225,6 @@
     if (selectionInProgress) {
       onselectionend?.(event);
     }
-
-    selectionStarted = false;
   }
 
   const onContextMenu = (event: MouseEvent) => {