React-select: Using control props menuIsOpen does not scroll menu to selected option

[Mihaela-Mac]

Hi,

I would like to report a possible bug.

I have noticed that when using controlled props, the menu list is not scrolled to the selected option. This is reproducible on your site on the controlled-props example https://react-select.com/advanced#controlled-props . If you select the last option from the example (Silver), close the menu and then open it again, the menu is not scrolled at the bottom. However, this feature is functional when you don't use controlled props (eg. https://react-select.com/advanced#accessing-internals any example).

Any help would be much appreciated!
Thank you!

[ghost]

I have also reported a possibly related issue https://github.com/JedWatson/react-select/issues/3381, in case it helps anyone.

[montogeek]

I also hit this bug, in my case I am just passing menuIsOpen={true}. If you search, then select one item, list does not scroll to the selected item, @gwyneplaine you can see a reproduction example here: https://codesandbox.io/s/6j5p641yv3

Search for "Option 456", then with your mouse click on it, scroll position is reset.

Any workaround meanwhile?

I search in the StateManager for a ref for the selected option, but it doesn't exist, there is one for focusedOption but it is not helpful in this case.

[montogeek]

Actually this works, but feels hacky :/

handleMenuClose = () => {
    const option = this.list.current.select.focusedOptionRef;

    setTimeout(() => {
      option.scrollIntoView();
    }, 100);
  };

<Select
        ref={this.list}
        isClearable
        isSearchable
        menuIsOpen={true}
        getOptionValue={option => option["id"]}
        getOptionLabel={option => _.get(option, props.searchKey)}
        options={props.items}
        value={props.input.value}
        placeholder={props.placeholder}
        isLoading={props.isLoading}
        onChange={props.input.onChange}
        components={customComponents}
        styles={customStyles}
        onMenuClose={this.handleMenuClose}
        filterOption={(option, query) => filterOption(option, query, props.searchKey)}
      />