Disable Focus on First option in React-Select

user_11275829 0
Viewed 4416

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
       });
       }}
       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})}
      />
react-select reactjs javascript
2 Answers

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

<Select
  ref={selectRef}

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

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 }}
/>
user_112758290
Related