在 material-ui 中使用 react select 如何通过仅按一次 Tab 键将焦点移动到下一个控件？

Question

默认情况下在 material-ui react-select 后 select 按选项卡或输入用户需要按两次选项卡将焦点移动到下一个元素。

下面是演示link

重现步骤：
1. 使用箭头键突出显示选项，按 tab 到 select 选项（焦点不会移动到下一个组件，焦点应该移动到下一个组件）
2. When option is selected, user needs to press tab twice to focus next component.

预计：
1.After select选项卡焦点移动到下一个组件
2.After select从鼠标点击选项，按一次 Tab 键后焦点应该移动到下一个组件。

Answer 1

这就是他们设计的工作方式， select 下拉元素有两个选项 onenter 和 ontab 当你按下 tab 它 select 那个选项它进入输入框（焦点是仍在 select) 中，然后要移动到下一个元素，您需要再次按 Tab。

对于大多数包，选择仅以这种方式工作。如果您想禁用选项卡 selection 行为，那么属性称为

tabSelectsValue

默认启用，您可以禁用它

<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
/>

它会将焦点移动到下一个元素，但随后您必须使用 enter 进入 select 选项。

Demo

Here 是 proptypes 的完整列表

在 material-ui 中使用 react select 如何通过仅按一次 Tab 键将焦点移动到下一个控件？

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

reactjs

react-select

material-ui