禁用 React-Select 中第一个选项的焦点

Question

我在 React Select 中有一个下拉菜单，我面临焦点问题。每当我们打开下拉菜单时，选项列表中的第一项就会获得焦点。有几个属性被传递，但没有一个用于禁用此功能。我在他们的 github 中看到了与自动对焦相关的问题。但该道具仍然没有添加到他们的包中。 我尝试使用焦点道具，但没有得到预期的结果。 这是我的选择下拉列表的代码。

<Select 
     className="profile-module-select-container"
     classNamePrefix="profile-module-select"
     defaultValue={{value: 0, label: 0}}
     options={options}
     openMenuOnFocus={false}
     autoFocus={options.isFocused}
     styles={styles}
     onChange={selected => {
        this.setState({
        optionSelect: selected.value
        }, () => {onChange(this.state.optionSelect, formKey)});
      }}
        onMenuOpen={(e, i, o) => {
        this.setState({
        selectMenuOpen: true
        });
       }}
       onMenuClose={() => {
       this.setState({
       selectMenuOpen: false
       });
       }}
       components={
          {
           IndicatorSeparator:() => null,
           DropdownIndicator: DropdownCaret,
           Placeholder: CustomPlaceholder,
           Option: CustomOptionComponent
           }
          }
           placeholder={placeholder}
           isSearchable={false}
           isClearable={false}
           name={name}
           value={options.filter(option => {return option.value === value})}
      />

Answer 1

在 github 上查看他们的问题跟踪器后，我终于找到了上述问题的答案。该道具尚未合并到其主分支中。在此之前，如果有人将来试图找到解决方案，这里是解决办法。 因此，在输入更改时，您必须在传递的函数上返回 null 以聚焦列表中的下一项。

<Select
 ref={ref => {
 this.selectRef = ref;
}}
 onInputChange={(value) => {this.selectRef.select.getNextFocusedOption = () => null }}
/>

Answer 2

对于功能组件和打字稿，实现@tkamath99的解决方案如下：

<Select
  ref={selectRef}

  onInputChange={value => {
    selectRef.current.select.getNextFocusedOption = () => false;
  }}
/>

Answer 3

要默认禁用第一个选项的焦点，我们可以调整悬停选项 className 的 css。所以React select中悬停选项的className是 .css-1n7v3ny-option（活动悬停选项）和 .css-yt9ioa-option（对于普通选项）

.css-1n7v3ny-option {
    background-color: transparent;
}

.css-1n7v3ny-option:hover {
    background-color: #f1f1f1;
}

.css-yt9ioa-option:hover {
    background-color: #f1f1f1;
}

因此，当用户将鼠标悬停在任何选项上时，选项背景中只会显示不同的颜色，否则背景将是透明的。 添加上述代码将解决问题，直到 React 选择团队定义任何道具来控制第一个选项的自动聚焦。

Answer 4

我通过以下方式解决了它，

首先，为了更简单的CSS，我更喜欢设置

classNamePrefix

元素的

className

和

<Select

，这样更容易设置样式

<Select
    classNamePrefix="my-select"
    className="my-select"

然后添加以下CSS代码，第一件事是使

option--is-focused

背景透明，然后将其他状态的背景设置为其他内容（我对选定状态和悬停状态使用diff'颜色）

.my-select .my-select__option.my-select__option--is-focused {
    background-color: transparent;
    color: #565656;
}

.my-select .my-select__option.my-select__option--is-selected {
    background-color: #D9E4EA;
    color: #565656;
}

.my-select__option:hover {
    background-color: #D9E4EA;
    color: #565656;
}

.my-select .my-select__option.my-select__option--is-focused:hover {
    background-color: #ebf1f4;
    color: #565656;
}