I have a dropdown in React Select, i am facing an issue with the focus. The first item in the option list is getting focused whenever we open the dropdown. There are couple of props that gets passed, but none of them is used to disable this feature. I saw issues related to autofocus mentioned in their github. But the prop is still not added in their package. I tried with focus props, but i am not getting the desired result. Here is my code for the Select Dropdown.

<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
       });
       }}
       ponents={
          {
           IndicatorSeparator:() => null,
           DropdownIndicator: DropdownCaret,
           Placeholder: CustomPlaceholder,
           Option: CustomOptionComponent
           }
          }
           placeholder={placeholder}
           isSearchable={false}
           isClearable={false}
           name={name}
           value={options.filter(option => {return option.value === value})}
      />

I have a dropdown in React Select, i am facing an issue with the focus. The first item in the option list is getting focused whenever we open the dropdown. There are couple of props that gets passed, but none of them is used to disable this feature. I saw issues related to autofocus mentioned in their github. But the prop is still not added in their package. I tried with focus props, but i am not getting the desired result. Here is my code for the Select Dropdown.

<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
       });
       }}
       ponents={
          {
           IndicatorSeparator:() => null,
           DropdownIndicator: DropdownCaret,
           Placeholder: CustomPlaceholder,
           Option: CustomOptionComponent
           }
          }
           placeholder={placeholder}
           isSearchable={false}
           isClearable={false}
           name={name}
           value={options.filter(option => {return option.value === value})}
      />

• javascript
• reactjs
• react-select

4 Answers 4

I have finally found an answer to the above question after going their issue tracker on github. The prop is yet to be merged in their main branch. Till then here is the work around if anyone tries to find the solution in future. So onInputChange, you have to return null on a function that gets passed to focus the next item in the list.

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

For a functional ponent and typescript, implement the solution of @tkamath99 as below:

<Select
  ref={selectRef}

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

To disable focus on first option by default , we can tweak css of the hovered option className . So className of the hovered option in React select is .css-1n7v3ny-option (active hovered option) & .css-yt9ioa-option (for Normal options)

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

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

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

So when user hovers over any option then only different colour will be shown in option background else the background will be transparent . Adding the above code will solve the issue , until React select team defines any props to control auto focus on first option .

I solved it in the following way,

first of all, for an easier CSS, I prefer to set the classNamePrefix and className of the <Select element, its easier to style like that (you don't have to use both of them, but in most cases it gives you better control over styling)

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

Then added the following CSS code, first thing is to make option--is-focused background transparent and then set the background of other states to something else (I used diff' colors for selected and hovered states)

.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 .my-select__option.my-select__option--is-focused:hover {
    background-color: #ebf1f4;
    color: #565656;
}