From 4891e9cc1c63d67853cf717dc60e1d947666ed39 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 28 Feb 2025 07:38:44 +0100
Subject: [PATCH 1/2] fix(react,svelte): prevent pane click when connection is
 in progress

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

diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx
index 91459539..4d2e392a 100644
--- a/packages/react/src/container/Pane/index.tsx
+++ b/packages/react/src/container/Pane/index.tsx
@@ -61,6 +61,7 @@ const wrapHandler = (
 const selector = (s: ReactFlowState) => ({
   userSelectionActive: s.userSelectionActive,
   elementsSelectable: s.elementsSelectable,
+  connectionInProgress: s.connection.inProgress,
   dragging: s.paneDragging,
 });
 
@@ -81,7 +82,7 @@ export function Pane({
   children,
 }: PaneProps) {
   const store = useStoreApi();
-  const { userSelectionActive, elementsSelectable, dragging } = useStore(selector, shallow);
+  const { userSelectionActive, elementsSelectable, dragging, connectionInProgress } = useStore(selector, shallow);
   const hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive);
 
   const container = useRef<HTMLDivElement | null>(null);
@@ -96,7 +97,8 @@ export function Pane({
 
   const onClick = (event: ReactMouseEvent) => {
     // We prevent click events when the user let go of the selectionKey during a selection
-    if (selectionInProgress.current) {
+    // We also prevent click events when a connection is in progress
+    if (selectionInProgress.current || connectionInProgress) {
       selectionInProgress.current = false;
       return;
     }
diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte
index aaa36560..c2200935 100644
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/packages/svelte/src/lib/container/Pane/Pane.svelte
@@ -63,7 +63,8 @@
     selectionKeyPressed,
     selectionMode,
     panActivationKeyPressed,
-    unselectNodesAndEdges
+    unselectNodesAndEdges,
+    connection,
   } = useStore();
 
   let container: HTMLDivElement;
@@ -80,7 +81,8 @@
 
   function onClick(event: MouseEvent | TouchEvent) {
     // We prevent click events when the user let go of the selectionKey during a selection
-    if (selectionInProgress) {
+    // We also prevent click events when a connection is in progress
+    if (selectionInProgress || $connection.inProgress) {
       selectionInProgress = false;
       return;
     }

From 065ff89d10488f9c76c56870511e45eaed299778 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 28 Feb 2025 07:51:58 +0100
Subject: [PATCH 2/2] chore(changeset): add

---
 .changeset/famous-impalas-relate.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/famous-impalas-relate.md

diff --git a/.changeset/famous-impalas-relate.md b/.changeset/famous-impalas-relate.md
new file mode 100644
index 00000000..318bcc30
--- /dev/null
+++ b/.changeset/famous-impalas-relate.md
@@ -0,0 +1,6 @@
+---
+'@xyflow/react': patch
+'@xyflow/svelte': patch
+---
+
+Prevent onPaneClick when connection is in progress. Closes [#5057](https://github.com/xyflow/xyflow/issues/5057)