React-select scrollintoView does not scroll the selected value

user_7844963 0
Viewed 3878

I am using react-select3.2.0. When I open my select box and select a option. And then I open my select dropdown again then selected value comes into view. But the problem comes when value of the dropdown comes from the props and not manually selected by opening dropdown. Then when I open the drop down it does not scroll into view the selected value. I have also tried menuScrollIntoView={true} props of react-select but my problem persists. My Select component is as follow;

import Select from "react-select";
.
.
.
    <Select 
      options={props.options}
      // isLoading={props.options ? true: false}
      onMenuOpen={onOpen}
      value={props.defaultOption}
      onChange={(event: any) => props.onSelect(event)}
      className ={"MyDropdown"}
      classNamePrefix={"MyDropdown"}
      // menuShouldScrollIntoView={true}
      isDisabled={props.isDisabled}
      isSearchable={props.isSearchable}
      >
    </Select>
react-select typescript reactjs
2 Answers

Give the value property by finding the selected index

<Select options={options} value={options[selectedIndex]} />
user_109484800

So I was able to solve this using onMenuOpen() call back function with timeOut as we do not have "MyDropdown__option--is-selected" class at the time when this function is invoked.

My solution is as follows;

//when dropdown is not manually clicked then it does not scroll into view
onMenuOpen = () => {
  setTimeout(()=>{
    const selectedEl = document.getElementsByClassName("MyDropdown__option--is-selected")[0];
    if(selectedEl){
      selectedEl.scrollIntoView({behavior:'smooth', block:'nearest', inline: 'start'});
    }
  },15);
};

render(){
const {defaultOption, options} = this.props;

  return (
    <Select 
      options={options}
      value={defaultOption}
      onMenuOpen={this.onMenuOpen}
      onChange={(item: IDropdownOptions) => this.props.onSelect(item)}
      className ={"MyDropdown"}
      classNamePrefix={"MyDropdown"}
      isDisabled={this.props.isDisabled}
      isSearchable={this.props.isSearchable}
      >
    </Select>
  );
}
user_78449630
Related