Merge pull request #5428 from Karl255/#5273-handle-click-target-fix

Allow detached handles

packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx

@@ -1,11 +1,11 @@
 // Reconnectable edges have a anchors around their handles to reconnect the edge.
 import {
   XYHandle,
+  type EdgePosition,
+  type FinalConnectionState,
+  type HandleType,
+  type OnConnectStart,
   type Connection,
-  EdgePosition,
-  FinalConnectionState,
-  HandleType,
-  OnConnectStart,
 } from '@xyflow/system';
 
 import { EdgeAnchor } from '../Edges/EdgeAnchor';
@@ -102,6 +102,7 @@ export function EdgeUpdateAnchors<EdgeType extends Edge = Edge>({
       getTransform: () => store.getState().transform,
       getFromHandle: () => store.getState().connection.fromHandle,
       dragThreshold: store.getState().connectionDragThreshold,
+      handleDomNode: event.currentTarget,
     });
   };
 

packages/react/src/components/Handle/index.tsx

@@ -114,7 +114,6 @@ function HandleComponent(
     onConnectAction?.(edgeParams);
     onConnect?.(edgeParams);
   };
-
   const onPointerDown = (event: ReactMouseEvent<HTMLDivElement> | ReactTouchEvent<HTMLDivElement>) => {
     if (!nodeId) {
       return;
@@ -129,6 +128,7 @@ function HandleComponent(
       const currentStore = store.getState();
 
       XYHandle.onPointerDown(event.nativeEvent, {
+        handleDomNode: event.currentTarget,
         autoPanOnConnect: currentStore.autoPanOnConnect,
         connectionMode: currentStore.connectionMode,
         connectionRadius: currentStore.connectionRadius,