Arrows not working using tabindex

[leo-paz]

Hey, I saw your comment on a thread on how to add keyboard navigation to tanstack. I am using shadcn UI Component library which uses tanstack for the tables.

I'm not sure if the issue i'm facing is related to this
but I am having the issue of when first hitting tab to get to the table it auto focuses inputs which you have to press esc to then be able to navigate with arrows. This seems unintuitive, do you have any advice?

[konsalex]

Hey @leo-paz. This is not related to the following issue. This issue is for multiple inputs that require keyboard navigation, and how you can understand if pressing an arrow to go the the character on the right in the input is not the same as going to the next widget.

I'm not sure if the issue i'm facing is related to this

For your case I think it's straight-forward, if I got this right.

Created a minimal repro in StackBlitz here.

CleanShot.2023-11-13.at.17.05.16.mp4

As in the attached video, you can focus first on the cell and then on the input. To do this, you need to make the cell focusable by adding a tabindex property, as the Tab event is handled by the browser natively and not by the library.