diff --git a/packages/react/src/components/NodesSelection/index.tsx b/packages/react/src/components/NodesSelection/index.tsx index ecaef17b..de118a44 100644 --- a/packages/react/src/components/NodesSelection/index.tsx +++ b/packages/react/src/components/NodesSelection/index.tsx @@ -51,11 +51,14 @@ export function NodesSelection({ } }, [disableKeyboardA11y]); + const shouldRender = !userSelectionActive && width !== null && height !== null; + useDrag({ nodeRef, + disabled: !shouldRender, }); - if (userSelectionActive || !width || !height) { + if (!shouldRender) { return null; } diff --git a/packages/react/src/hooks/useDrag.ts b/packages/react/src/hooks/useDrag.ts index f7943f98..f33c1276 100644 --- a/packages/react/src/hooks/useDrag.ts +++ b/packages/react/src/hooks/useDrag.ts @@ -3,6 +3,7 @@ import { XYDrag, type XYDragInstance } from '@xyflow/system'; import { handleNodeClick } from '../components/Nodes/utils'; import { useStoreApi } from './useStore'; +import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'; type UseDragParams = { nodeRef: RefObject; @@ -51,23 +52,29 @@ export function useDrag({ }); }, []); - useEffect(() => { + useIsomorphicLayoutEffect(() => { if (disabled) { xyDrag.current?.destroy(); - } else if (nodeRef.current) { - xyDrag.current?.update({ - noDragClassName, - handleSelector, - domNode: nodeRef.current, - isSelectable, - nodeId, - nodeClickDistance, - }); - return () => { - xyDrag.current?.destroy(); - }; + return; } - }, [noDragClassName, handleSelector, disabled, isSelectable, nodeRef, nodeId]); + + if (!nodeRef.current || !xyDrag.current) { + return; + } + + xyDrag.current.update({ + noDragClassName, + handleSelector, + domNode: nodeRef.current, + isSelectable, + nodeId, + nodeClickDistance, + }); + + return () => { + xyDrag.current?.destroy(); + }; + }, [noDragClassName, handleSelector, disabled, isSelectable, nodeRef, nodeId, nodeClickDistance]); return dragging; }