Skip to content

TableView keyboard navigation causes focus leak with non-input interactive components #10132

@Sourour18

Description

@Sourour18

Provide a general summary of the issue here

Hi,

First, thank you for the great work on React Spectrum and React Aria.

I found an issue with keyboard navigation in TableView.
When navigating cells using the Tab key:

  • If the cell contains a standard input component (e.g. NumberField without stepper, TextField), focus navigation works correctly.
  • However, if the next interactive element is a Picker, Switch, Radio, Checkbox, NumberField with stepper or similar component, focus escapes the TableView instead of moving correctly to the next focusable element inside the table.

This creates a focus leak and breaks keyboard accessibility/navigation consistency inside the table.
I attached a video demonstrating the issue.
Thank you for taking a look into this issue.

Demo-focus-leak.mp4

🤔 Expected Behavior?

  • Tabbing should continue correctly between interactive elements within the TableView row/cells.
  • Focus should remain trapped within the expected table navigation flow until the user exits intentionally.

😯 Current Behavior

Focus jumps outside the table unexpectedly when reaching certain interactive Spectrum components.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

  1. Create a TableView with multiple editable/interactable cells.
  2. Add different interactive components inside cells:
  • TextField
  • Picker
  • Switch
  • RadioGroup / Radio
  • Checkbox
  1. Focus the first interactive element inside the table.
  2. Use the Tab key to navigate through the cells/components.

Result:

  • Navigation works correctly between text inputs.
  • When focus reaches components like Picker, Switch, Radio, or Checkbox, focus unexpectedly escapes the TableView.

Expected:

  • Focus should continue to the next interactive element within the TableView without leaving the table unexpectedly.

Version

s2 1.4.0

What browsers are you seeing the problem on?

Microsoft Edge, Chrome, Firefox

If other, please specify.

No response

What operating system are you using?

Windows 11 Pro

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions