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

[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

[reidbarber]

See https://github.com/adobe/react-spectrum/issues/2328 for grid navigation edit mode.

[nirtamir2]

See #2328 for grid navigation edit mode.

Thanks! The focus behavior does not document well so I assume this is what happening. Should I close this issue? It did not resolve but I hope #2328 will find a way / fix my issue (depending on the implementation)