CODEWITHSUNDEEP
reactjsmaterial-uireact-select
Yasin
Yasin

Reputation: 1232

In material-ui using react select how to move focus to next control by pressing tab only once?

By default in material-ui react-select after selecting option by tab or enter user need press tab twice to move focus to next element.

Below is the link for the demo

https://codesandbox.io/s/8xy53m60m2

Steps to repro:
1. Press tab to select option by highlighting option using arrow keys (focus is not moved to next component, Focus should move to next component)
2. When option is selected, user needs to press tab twice to focus next component.

Expected:
1.After selecting option from tab focus move to next component
2.After selecting option from mouse, focus should move to next component after pressing tab button once.

Upvotes: 4

Views: 5797

Answers (1)

Just code
Just code

Reputation: 13801

This is how they designed to work, There are two options to select dropdown elements onenter and ontab when you press the tab it selects that option it enters into input box (the focus is still in the select) and then to move to the next element you need to press the tab again.

Selection works that way only, for most of the packages. If you want to disable tab selection behavior then is property called

tabSelectsValue

which is enabled by default, you can disable it

<Select        
    classes={classes}
    styles={selectStyles}
    options={suggestions}
    components={components}
    value={this.state.single}
    tabSelectsValue={false}
    onChange={this.handleChange("single")}
    placeholder="Search a country (start with a)"
    isClearable
/>

it will move the focus to next element, but then you will have to use enter to select the option.

Demo

Here is the full list of proptypes

Upvotes: 2

Related Questions