Provide a general summary of the feature here
Add option to prevent automatic focus on drop-target row after reorder in Table component with useDragAndDrop hook.
🤔 Expected Behavior?
After completing a drag-and-drop reorder operation on a Table row:
- The row data should be reordered correctly ✓
- Focus should NOT automatically jump to the drop-target row
- Focus should remain where the user left it (e.g., on a button they just clicked, or the document body)
- Alternatively, expose a callback/hook to let developers control post-drop focus behavior
😯 Current Behavior
When reordering a row via drag-and-drop:
- User drags row at index 7 to position 4
- Drop is complete → DOM updates correctly
- React-aria automatically focuses the drop-target row (now at new position)
- User's keyboard focus unexpectedly jumps to that row
- If the row is near the bottom of viewport, page may scroll to keep it visible
This interrupts user workflow, especially in data-entry or form contexts where focus state matters.
💁 Possible Solution
Option 1 (Recommended): Add a prop to useDragAndDrop like:
const { dragAndDropHooks } = useDragAndDrop({
// ... existing options
shouldFocusDropTarget: false, // or similar
})
Option 1 (Recommended): Add a prop to useDragAndDrop like:
const { dragAndDropHooks } = useDragAndDrop({
// ... existing options
shouldFocusDropTarget: false, // or similar
})
Option 2: Expose an onDropComplete callback that fires after focus management completes, allowing developers to restore focus programmatically:
onDropComplete?: (target: DropTarget) => void
Option 3: Check if focus was deliberately moved away from the table (e.g., to a button) and respect that intent instead of auto-focusing.
Workaround we tried (unsuccessful):
tabindex="-1" + restore after timeout
focusin event listener interception (capture phase)
pointer-events: none on table during focus management
inert attribute on drop-target row
requestAnimationFrame + manual focus transfer
All approaches failed because react-aria's focus management happens too deep in the lifecycle.
🔦 Context
- react-aria-components: 1.20.0
- react-aria: 3.51.0
- Browser: Chrome
💻 Examples
No response
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
Provide a general summary of the feature here
Add option to prevent automatic focus on drop-target row after reorder in
Tablecomponent withuseDragAndDrophook.🤔 Expected Behavior?
After completing a drag-and-drop reorder operation on a Table row:
😯 Current Behavior
When reordering a row via drag-and-drop:
This interrupts user workflow, especially in data-entry or form contexts where focus state matters.
💁 Possible Solution
Option 1 (Recommended): Add a prop to
useDragAndDroplike:Option 1 (Recommended): Add a prop to
useDragAndDroplike:Option 2: Expose an onDropComplete callback that fires after focus management completes, allowing developers to restore focus programmatically:
onDropComplete?: (target: DropTarget) => void
Option 3: Check if focus was deliberately moved away from the table (e.g., to a button) and respect that intent instead of auto-focusing.
Workaround we tried (unsuccessful):
tabindex="-1" + restore after timeout
focusin event listener interception (capture phase)
pointer-events: none on table during focus management
inert attribute on drop-target row
requestAnimationFrame + manual focus transfer
All approaches failed because react-aria's focus management happens too deep in the lifecycle.
🔦 Context
💻 Examples
No response
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response