I am using ReactJS material UI tabs navigation. I want to disable the arrow keys navigation of Tabs in Material UI.

The thing I want is to navigate using Tab key and then after pressing Enter it should open the page under that tab between two <Tabs\>.

And then after Enter it should navigate focus within that tab page using Tab key.

Is this achieveable ? How can I do that ?

CodePudding user response：

Material UI is not providing this type of functionality to navigate with tab key instead of arrow key.

you can just disable the navigation with arrow key but still it focus with arrow key

you can check => https://mui.com/components/tabs/#heading-keyboard-navigation

CodePudding user response：

As @foramkumar-patel has correctly stated, it is not possible to completely disable the arrow key behavior.

However you can still add the tab key navigation.

All you need to do is to add the tabIndex property like this:

<Tab tabIndex={0} label="My tab" />

Here's a working example: https://codesandbox.io/s/basictabs-material-demo-forked-wzs4o?file=/demo.js

Pressing Tab moves forward, but at the last tab it will move to the next tabbable element on a page. Pressing Shift Tab moves to the previous tab, and off the first tab to the previous tabbable element.

For more info on the tabindex attribute you can look here: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

Note: the keyboard navigation (either arrow keys or tabs) does not work in Safari on macOS