fix: resolve keyboard reordering edge cases in DraggableList

src/components/DraggableList/SortableItem.tsx

@@ -4,18 +4,29 @@ import React from 'react';
 import type {SortableItemProps} from './types';
 
 function SortableItem({id, children, disabled = false}: SortableItemProps) {
-    const {attributes, listeners, setNodeRef, transform, transition} = useSortable({id, disabled});
+    const {attributes, listeners, setNodeRef, transform, transition, isDragging} = useSortable({id, disabled});
 
     const style = {
         touchAction: 'none',
         transform: CSS.Transform.toString(transform),
         transition,
     };
 
+    // Prevent Enter key from reaching MenuItem when dragging to avoid navigation conflicts
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        if (!isDragging || e.key !== 'Enter') {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+    };
+
     return (
         <div
             ref={setNodeRef}
             style={style}
+            // Use capture phase to intercept Enter before MenuItem handles it
+            onKeyDownCapture={handleKeyDown}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...attributes}
             // eslint-disable-next-line react/jsx-props-no-spreading

src/components/DraggableList/index.tsx

@@ -2,7 +2,7 @@ import type {DragEndEvent} from '@dnd-kit/core';
 import {closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors} from '@dnd-kit/core';
 import {restrictToParentElement, restrictToVerticalAxis} from '@dnd-kit/modifiers';
 import {arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy} from '@dnd-kit/sortable';
-import React, {Fragment} from 'react';
+import React, {Fragment, useEffect, useId, useRef} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import type {ScrollView as RNScrollView} from 'react-native';
 import ScrollView from '@components/ScrollView';
@@ -28,16 +28,37 @@ function DraggableList<T>({
 }: DraggableListProps<T> & {ref?: React.ForwardedRef<RNScrollView>}) {
     const styles = useThemeStyles();
 
+    // Unique ID per mount to ensure DndContext state resets when component remounts
+    const instanceId = useId();
+
+    // Track if a drag is currently active to avoid dispatching global Escape when not needed
+    const isDraggingRef = useRef(false);
+
+    // Cancel any active keyboard drag when the component unmounts to prevent ghost drag state
+    useEffect(() => {
+        return () => {
+            if (typeof document === 'undefined' || !isDraggingRef.current) {
+                return;
+            }
+            document.dispatchEvent(new KeyboardEvent('keydown', {key: 'Escape', code: 'Escape', bubbles: true, cancelable: true}));
+        };
+    }, []);
+
     const items = data.map((item, index) => {
         return keyExtractor(item, index);
     });
 
+    const onDragStart = () => {
+        isDraggingRef.current = true;
+    };
+
     /**
      * Function to be called when the user finishes dragging an item
      * It will reorder the list and call the callback function
      * to notify the parent component about the change
      */
     const onDragEnd = (event: DragEndEvent) => {
+        isDraggingRef.current = false;
         const {active, over} = event;
 
         if (over !== null && active.id !== over.id) {
@@ -49,6 +70,10 @@ function DraggableList<T>({
         }
     };
 
+    const onDragCancel = () => {
+        isDraggingRef.current = false;
+    };
+
     const sortableItems = data.map((item, index) => {
         const key = keyExtractor(item, index);
         // Check if item has a disabled property for dragging
@@ -77,6 +102,11 @@ function DraggableList<T>({
         }),
         useSensor(KeyboardSensor, {
             coordinateGetter: sortableKeyboardCoordinates,
+            keyboardCodes: {
+                start: ['Space'],
+                cancel: ['Escape'],
+                end: ['Space'],
+            },
         }),
     );
 
@@ -90,7 +120,10 @@ function DraggableList<T>({
         >
             <div>
                 <DndContext
+                    key={instanceId}
+                    onDragStart={onDragStart}
                     onDragEnd={onDragEnd}
+                    onDragCancel={onDragCancel}
                     sensors={sensors}
                     collisionDetection={closestCenter}
                     modifiers={[restrictToParentElement, restrictToVerticalAxis]}