From 43f188d3b1d1b3c639aa457aef8b0de0e16ac2cf Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Fri, 21 Feb 2025 17:52:08 +0100
Subject: [PATCH 1/2] fix(click-connections): handle isConnectableStart
 correctly #5041

---
 .../react/src/components/Handle/index.tsx     | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/components/Handle/index.tsx b/packages/react/src/components/Handle/index.tsx
index df7b428b..b2c3373e 100644
--- a/packages/react/src/components/Handle/index.tsx
+++ b/packages/react/src/components/Handle/index.tsx
@@ -46,9 +46,7 @@ const selector = (s: ReactFlowState) => ({
 const connectingSelector =
   (nodeId: string | null, handleId: string | null, type: HandleType) => (state: ReactFlowState) => {
     const { connectionClickStartHandle: clickHandle, connectionMode, connection } = state;
-
     const { fromHandle, toHandle, isValid } = connection;
-
     const connectingTo = toHandle?.nodeId === nodeId && toHandle?.id === handleId && toHandle?.type === type;
 
     return {
@@ -60,6 +58,7 @@ const connectingSelector =
           ? fromHandle?.type !== type
           : nodeId !== fromHandle?.nodeId || handleId !== fromHandle?.id,
       connectionInProcess: !!fromHandle,
+      clickConnectionInProcess: !!clickHandle,
       valid: connectingTo && isValid,
     };
   };
@@ -87,11 +86,15 @@ function HandleComponent(
   const store = useStoreApi();
   const nodeId = useNodeId();
   const { connectOnClick, noPanClassName, rfId } = useStore(selector, shallow);
-  const { connectingFrom, connectingTo, clickConnecting, isPossibleEndHandle, connectionInProcess, valid } = useStore(
-    connectingSelector(nodeId, handleId, type),
-    shallow
-  );
-
+  const {
+    connectingFrom,
+    connectingTo,
+    clickConnecting,
+    isPossibleEndHandle,
+    connectionInProcess,
+    clickConnectionInProcess,
+    valid,
+  } = useStore(connectingSelector(nodeId, handleId, type), shallow);
   if (!nodeId) {
     store.getState().onError?.('010', errorMessages['error010']());
   }
@@ -239,7 +242,7 @@ function HandleComponent(
           connectionindicator:
             isConnectable &&
             (!connectionInProcess || isPossibleEndHandle) &&
-            (connectionInProcess ? isConnectableEnd : isConnectableStart),
+            (connectionInProcess || clickConnectionInProcess ? isConnectableEnd : isConnectableStart),
         },
       ])}
       onMouseDown={onPointerDown}

From 2fe0e850a8c415c6a3113796a2c5c80e7cad2376 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Fri, 21 Feb 2025 17:54:33 +0100
Subject: [PATCH 2/2] chore(changeset): add

---
 .changeset/late-pugs-thank.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/late-pugs-thank.md

diff --git a/.changeset/late-pugs-thank.md b/.changeset/late-pugs-thank.md
new file mode 100644
index 00000000..56413165
--- /dev/null
+++ b/.changeset/late-pugs-thank.md
@@ -0,0 +1,5 @@
+---
+'@xyflow/react': patch
+---
+
+Allow click connections when target sets `isConnectableStart`