Merge pull request #5684 from ysds/fix/nodes-selection-drag-after-programmatic-selection

fix: ensure drag handlers update when nodes selection changes programmatically

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

@@ -51,11 +51,14 @@ export function NodesSelection<NodeType extends Node>({
     }
   }, [disableKeyboardA11y]);
 
+  const shouldRender = !userSelectionActive && width !== null && height !== null;
+
   useDrag({
     nodeRef,
+    disabled: !shouldRender,
   });
 
-  if (userSelectionActive || !width || !height) {
+  if (!shouldRender) {
     return null;
   }
 

packages/react/src/hooks/useDrag.ts

@@ -52,22 +52,23 @@ export function useDrag({
   }, []);
 
   useEffect(() => {
-    if (disabled) {
-      xyDrag.current?.destroy();
-    } else if (nodeRef.current) {
-      xyDrag.current?.update({
-        noDragClassName,
-        handleSelector,
-        domNode: nodeRef.current,
-        isSelectable,
-        nodeId,
-        nodeClickDistance,
-      });
-      return () => {
-        xyDrag.current?.destroy();
-      };
+    if (disabled || !nodeRef.current || !xyDrag.current) {
+      return;
     }
-  }, [noDragClassName, handleSelector, disabled, isSelectable, nodeRef, nodeId]);
+
+    xyDrag.current.update({
+      noDragClassName,
+      handleSelector,
+      domNode: nodeRef.current,
+      isSelectable,
+      nodeId,
+      nodeClickDistance,
+    });
+
+    return () => {
+      xyDrag.current?.destroy();
+    };
+  }, [noDragClassName, handleSelector, disabled, isSelectable, nodeRef, nodeId, nodeClickDistance]);
 
   return dragging;
 }