Skip to content

[RAC] - Table - fix keyboard navigation when using conditional render focusable cell #5005

@nirtamir2

Description

@nirtamir2

Provide a general summary of the issue here

https://stackblitz.com/edit/stackblitz-starters-xgaei9?file=src%2FTestTable.tsx

When we have cells that are focusable (like elements withtabIndex=0, inputs) - the focus management of the table works well - and it move to the first element of the cell (and even if we have a cell with 2 inputs - we can navigate between them with the arrow keys). The problems starts when we render the input conditionally - depending on the isFocus / isFocusVisible props from react-aria. The element focus is lost in this case. The use case is for showing table cells as their view but when they are focusable change their look to their edit mode. In this case we lose focus.

🤔 Expected Behavior?

The focus mode to the navigated element

😯 Current Behavior

Focus is lost

💁 Possible Solution

Allow controlling the keyboard management / add escape hatch / focus on the table td cell instead of the inner element

🔦 Context

I want to create a table that conditionally toggle between view mode of the data, and input mode when the cell is focusable. But the keyboard navigation breaks in this case

🖥️ Steps to Reproduce

Go go https://stackblitz.com/edit/stackblitz-starters-xgaei9?file=src%2FTestTable.tsx
focus the cells form 1&2 columns with the keyboard. Try to focus the conditional render column. See focus is lost

Version

"react-aria-components": "1.0.0-alpha.6"

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions