Merge pull request #5059 from bcakmakoglu/fix/pane-click

fix(react,svelte): prevent pane click when connection is in progress

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

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;
     }

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;
     }