From 062f1465c741779a9a8ca6388dc68532287f85a7 Mon Sep 17 00:00:00 2001
From: Jakub Wojdziak <kubaxplay@o2.pl>
Date: Wed, 2 Jul 2025 13:01:38 +0200
Subject: [PATCH] fix: add ref to drag handle button for improved DnD
 functionality

---
 examples/react/row-dnd/src/main.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/examples/react/row-dnd/src/main.tsx b/examples/react/row-dnd/src/main.tsx
index c8f3e23b00..20b1d1b5a6 100644
--- a/examples/react/row-dnd/src/main.tsx
+++ b/examples/react/row-dnd/src/main.tsx
@@ -37,12 +37,13 @@ import { CSS } from '@dnd-kit/utilities'
 
 // Cell Component
 const RowDragHandleCell = ({ rowId }: { rowId: string }) => {
-  const { attributes, listeners } = useSortable({
+  const { setNodeRef, attributes, listeners } = useSortable({
     id: rowId,
   })
   return (
     // Alternatively, you could set these attributes on the rows themselves
-    <button {...attributes} {...listeners}>
+    // If you happen to have a problem with the drag handle not working, try setting the ref to `setNodeRef` attribute on this button but normally it should work fine without it
+    <button ref={setNodeRef} {...attributes} {...listeners}>
       🟰
     </button>
   )