From dd48e47d02a81cfabc2ba32f0bf24bc9b1f09f76 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 27 Aug 2025 21:51:45 +0200
Subject: [PATCH] fix(core): use valid handle result as connecting handle
 (#1932)

* fix(core): use valid handle result as connecting handle

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* chore(changeset): add

---------

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .changeset/orange-ligers-fail.md           |  5 +++++
 packages/core/src/composables/useHandle.ts | 11 +++++++----
 packages/core/src/utils/handle.ts          |  4 +++-
 3 files changed, 15 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/orange-ligers-fail.md

diff --git a/.changeset/orange-ligers-fail.md b/.changeset/orange-ligers-fail.md
new file mode 100644
index 00000000..1b124c81
--- /dev/null
+++ b/.changeset/orange-ligers-fail.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Use toHandle from valid handle check as target handle in ongoing connections
diff --git a/packages/core/src/composables/useHandle.ts b/packages/core/src/composables/useHandle.ts
index 7d83f181..9c19acf3 100644
--- a/packages/core/src/composables/useHandle.ts
+++ b/packages/core/src/composables/useHandle.ts
@@ -207,6 +207,7 @@ export function useHandle({
           edges.value,
           nodes.value,
           findNode,
+          nodeLookup.value,
         )
 
         handleDomNode = result.handleDomNode
@@ -242,18 +243,19 @@ export function useHandle({
           return
         }
 
+        const connectingHandle = closestHandle ?? result.toHandle
         updateConnection(
-          closestHandle && isValid
+          connectingHandle && isValid
             ? rendererPointToPoint(
                 {
-                  x: closestHandle.x,
-                  y: closestHandle.y,
+                  x: connectingHandle.x,
+                  y: connectingHandle.y,
                 },
                 viewport.value,
               )
             : connectionPosition,
           result.toHandle,
-          getConnectionStatus(!!closestHandle, isValid),
+          getConnectionStatus(!!connectingHandle, isValid),
         )
 
         previousConnection = newConnection
@@ -377,6 +379,7 @@ export function useHandle({
       edges.value,
       nodes.value,
       findNode,
+      nodeLookup.value,
     )
 
     const isOwnHandle = result.connection?.source === result.connection?.target
diff --git a/packages/core/src/utils/handle.ts b/packages/core/src/utils/handle.ts
index f52bfb9a..834f16ed 100644
--- a/packages/core/src/utils/handle.ts
+++ b/packages/core/src/utils/handle.ts
@@ -95,6 +95,7 @@ export function getClosestHandle(
       const { x, y } = getHandlePosition(node, handle, handle.position, true)
 
       const distance = Math.sqrt((x - position.x) ** 2 + (y - position.y) ** 2)
+
       if (distance > connectionRadius) {
         continue
       }
@@ -139,6 +140,7 @@ export function isValidHandle(
   edges: GraphEdge[],
   nodes: GraphNode[],
   findNode: Actions['findNode'],
+  nodeLookup: NodeLookup,
 ) {
   const isTarget = fromType === 'target'
   const handleDomNode = handle
@@ -195,7 +197,7 @@ export function isValidHandle(
         targetNode: findNode(connection.target)!,
       })
 
-    result.toHandle = handle
+    result.toHandle = getHandle(handleNodeId, handleType, handleId, nodeLookup, connectionMode, true)
   }
 
   return result