From d302511c96e11e30763361aa6a88d1eb6c6dc0f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Claud=C3=A9ric=20Demers?= <clauderic.demers@shopify.com>
Date: Wed, 18 Sep 2024 09:40:17 -0400
Subject: [PATCH] Prevent unstable ref from being unset during drag operation

---
 .changeset/prevent-unstable-ref.md                |  5 +++++
 packages/react/src/core/draggable/useDraggable.ts |  8 ++++++++
 packages/react/src/sortable/useSortable.ts        | 10 ++++++++++
 3 files changed, 23 insertions(+)
 create mode 100644 .changeset/prevent-unstable-ref.md

diff --git a/.changeset/prevent-unstable-ref.md b/.changeset/prevent-unstable-ref.md
new file mode 100644
index 00000000..5a490d81
--- /dev/null
+++ 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
index 0e56abe4..f0eb840f 100644
--- 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
index 31a65f44..6d11582e 100644
--- 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]