reactjs
Keyboard navigation
Is there any way to disable keyboard navigation (using arrow keys when tabs focused) PS: i just want to disable it because of its different behaviour under different browsers.
Shortly - i need to render all <li> without tabindex.... its impossible now
reason - It throws Focus from active tab to body from ported modal after "tab" key (chrome only)
By the way i tried to pass tabindex -1 to rendered Tab but it still focusable after mouse click on it
UPD as workaround (read - hack) it is possible to remove key navigation by passing custom onKeyDown (and preventing everything there) to Tab component
I apologize for not answering more thoroughly — unfortunately my time is very limited at the moment.
The best I can give you right now is: if I was trying to solve this issue, I would look into using the onSelect prop, and cancelling navigation by returning false from the function you pass to it if event.type === 'keydown'. See https://github.com/reactjs/react-tabs#onselect-index-number-lastindex-number-event-event--boolean
My advice is to try that and see where it leads you.
NOTE: I'm pretty sure the README is wrong there and you need to return false, (not true, which is what it says) in order to cancel the navigation. I'll look into this once I have more time, but if you or anyone else finds out this is correct we'd really appreciate and happily merge a PR to fix the docs!
@joepvl firstly thanks for your answer, it partially solves my problem. At the same time if i want to disable whole navigation, its still possible to navigate to active tab using Tab key because it has tabindex=0 according to this part of code as i understand, there are no hacks for solving this case