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

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