Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Keyboard navigation #260

Open
m1lk1way opened this issue Aug 28, 2018 · 4 comments
Open

Keyboard navigation #260

m1lk1way opened this issue Aug 28, 2018 · 4 comments

Comments

@m1lk1way
Copy link

m1lk1way commented Aug 28, 2018

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)

@m1lk1way
Copy link
Author

m1lk1way commented Aug 31, 2018

By the way i tried to pass tabindex -1 to rendered Tab but it still focusable after mouse click on it

@m1lk1way
Copy link
Author

m1lk1way commented Sep 3, 2018

UPD as workaround (read - hack) it is possible to remove key navigation by passing custom onKeyDown (and preventing everything there) to Tab component

@joepvl
Copy link
Collaborator

joepvl commented Sep 3, 2018

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!

@m1lk1way
Copy link
Author

m1lk1way commented Sep 4, 2018

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants