Remember scrollbar position after view rendered

[lengockyquang]

Hi, I am using react-select version 2.4.4.
Here's the position of scrollbar when select value "2005"

But after reselect the input, position of scrollbar changed

Are there any option to remember position of scrollbar? Thanks

[ebonow]

Greetings @lengockyquang ,

The default support is to automatically focus the selected option in the Menu as the bottom most option in the menu. There are other issues related to this asking for more support about where the selected option displays in the menu...
#3822
#4305

In regards to why it simply doesn't remember scroll position, I can hypothesize that one reason is likely because the options list can change making the scroll position irrelevant to the selected option.

If you wanted to remember the scroll position, you could add a scroll listener to the MenuList and onMenuOpen, scroll to that position.

const MenuList = (props) => {
  const { children, className, cx, getStyles, isMulti, innerRef, selectProps } = props;
  return (
    <div
      css={getStyles('menuList', props)}
      className={cx(
        {
          'menu-list': true,
          'menu-list--is-multi': isMulti,
        },
        className
      )}
      ref={innerRef}
      onScroll={selectProps.onMenuScroll}
    >
      {children}
    </div>
  );
};

const MySelect = props => {
  const selectRef = useRef();
  const [scrollPosition, setScrollPosition ] = useState();
  const onMenuScroll = e => // setScrollPosition here. Probably want to use debounce...

  onMenuOpen = () => {
    // scroll `selectRef.current.select.menuListRef` to scrollPosition
    // this will need to happen on setTimeout as its a known issues as of now 
    // that menuListRef is null at time of this evocation 
    // https://github.com/JedWatson/react-select/issues/4243
  }

  return <Select ref={selectRef} components={{MenuList}} onMenuOpen={onMenuOpen} onMenuScroll={onMenuScroll} />

This should be enough to get you started. I can reopen this if necessary, and feel free to reply if you have any questions.