Блог

Я использую react-select и добавил кнопку в конце компонента MenuList, чтобы загрузить больше данных. Когда я нажимаю на эту кнопку, мое состояние обновляется и подробности изменений. options Select Это должным образом перерисовывает новые параметры, однако список прокручивается обратно к началу.

 const MenuList = (props: MenuListProps): JSX.Element => {
  return (
    <components.MenuList {...props }>
      {props.children}
      <button onClick={fetchMore}>Load more</button>
    </components.MenuList>
  );
};

return <Select
  onFocus={onFocus}
  isLoading={loading}
  isClearable={true}
  isSearchable={true}
  options={items.map(item => {
    return { label: item.name, value: item.id };
  })}
  onInputChange={onInputChange}
  components={{ MenuList }}
/>;
 

Поэтому всякий раз, когда я изменяю свое items состояние, список меню прокручивается вверх. Я попытался найти обходной путь, вручную прокрутив назад в предыдущее положение, но оно видно и не сбивает.

Есть какие-нибудь идеи о том, как обойти это поведение ?