React-selectscrollintoView不滚动所选值

Question

我正在使用react-select3.2.0。当我打开选择框并选择一个选项时。然后我再次打开选择下拉列表，然后所选值就会出现。但是，当下拉列表的值来自道具而不是通过打开下拉列表手动选择时，问题就出现了。然后，当我打开下拉菜单时，它不会滚动到查看所选值。我也尝试过react-select的menuScrollIntoView={true}属性，但我的问题仍然存在。我的选择组件如下；

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>

Answer 1

因此，我能够使用带有超时的 onMenuOpen() 回调函数来解决此问题，因为调用此函数时我们没有“MyDropdown__option--is-selected”类。

我的解决方案如下；

//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>
  );
}