From b8fc637091bd4eea4f48a15a34cce61976be6b13 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 25 Jan 2024 11:42:03 +0100
Subject: [PATCH] refactor(svelte): use correct id for handle data-id attr

---
 packages/svelte/src/lib/components/Handle/Handle.svelte | 2 +-
 packages/system/src/xyhandle/XYHandle.ts                | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte
index 87b6c9d2..f00ccc44 100644
--- a/packages/svelte/src/lib/components/Handle/Handle.svelte
+++ b/packages/svelte/src/lib/components/Handle/Handle.svelte
@@ -134,7 +134,7 @@ The Handle component is the part of a node that can be used to connect nodes.
   data-handleid={handleId}
   data-nodeid={nodeId}
   data-handlepos={position}
-  data-id="{flowId}-{nodeId}-{id || null}-{type}"
+  data-id="{$flowId}-{nodeId}-{id || null}-{type}"
   class={cc([
     'svelte-flow__handle',
     `svelte-flow__handle-${position}`,
diff --git a/packages/system/src/xyhandle/XYHandle.ts b/packages/system/src/xyhandle/XYHandle.ts
index 239e6356..4ddb5313 100644
--- a/packages/system/src/xyhandle/XYHandle.ts
+++ b/packages/system/src/xyhandle/XYHandle.ts
@@ -260,9 +260,10 @@ function isValidHandle(
   }: IsValidParams
 ) {
   const isTarget = fromType === 'target';
-  const handleDomNode = doc.querySelector(
-    `.${lib}-flow__handle[data-id="${flowId}-${handle?.nodeId}-${handle?.id}-${handle?.type}"]`
-  );
+  const handleDomNode = handle
+    ? doc.querySelector(`.${lib}-flow__handle[data-id="${flowId}-${handle?.nodeId}-${handle?.id}-${handle?.type}"]`)
+    : null;
+
   const { x, y } = getEventPosition(event);
   const handleBelow = doc.elementFromPoint(x, y);
   // we always want to prioritize the handle below the mouse cursor over the closest distance handle,