Prevent unstable ref from being unset during drag operation

clauderic · Sep 18, 2024 · d302511 · d302511
1 parent c597b3f
commit d302511
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 0 deletions.
diff --git a/.changeset/prevent-unstable-ref.md b/.changeset/prevent-unstable-ref.md
@@ -0,0 +1,5 @@
+---
+'@dnd-kit/react': patch
+---
+
+Prevent unstable `ref` from being set to undefined during a drag operation on draggable sources during a drag operation.
diff --git a/packages/react/src/core/draggable/useDraggable.ts b/packages/react/src/core/draggable/useDraggable.ts
@@ -67,6 +67,14 @@ export function useDraggable<T extends Data = Data>(
     ),
     ref: useCallback(
       (element: Element | null) => {
+        if (
+          !element &&
+          draggable.element?.isConnected &&
+          !draggable.manager?.dragOperation.status.idle
+        ) {
+          return;
+        }
+
         draggable.element = element ?? undefined;
       },
       [draggable]

diff --git a/packages/react/src/sortable/useSortable.ts b/packages/react/src/sortable/useSortable.ts
@@ -121,6 +121,16 @@ export function useSortable<T extends Data = Data>(input: UseSortableInput<T>) {
     ),
     sourceRef: useCallback(
       (element: Element | null) => {
+        const {manager} = sortable;
+
+        if (
+          !element &&
+          sortable.source?.isConnected &&
+          !manager?.dragOperation.status.idle
+        ) {
+          return;
+        }
+
         sortable.source = element ?? undefined;
       },
       [sortable]