Skip to content

Provide option to prevent auto-focus of drop target row after reorder in Table with useDragAndDrop #10499

Description

@Dilettante258

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:

  1. User drags row at index 7 to position 4
  2. Drop is complete → DOM updates correctly
  3. React-aria automatically focuses the drop-target row (now at new position)
  4. User's keyboard focus unexpectedly jumps to that row
  5. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions