-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Description
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