react-select does not scroll into view selected option

[Aror]

I expect that the following will result in the selected option being shown as soon as the dropdown is opened. It does not. It highlights the selected option but you have to scroll to it in order to see it.

```
options={[...Array(121).keys()].map(num => {return {value: num, label: num}})}
value={{label: 20, value: 20}}
isOptionSelected={(option) => (option.value == 20) ? true : false}
/>
````

[akinorimiz]

You can use a custom component.

const Option = (props) => {
    const ref = useRef();

    useEffect(() => {
        props.isSelected && ref.current.scrollIntoView();
    }, [props.isSelected]);

    return (
        <components.Option {...props} innerRef={ref} />
    );
};

[andreme]

Duplicate of #3535 and #3648

[harryo]

You can use a custom component.

const Option = (props) => {
    const ref = useRef();

    useEffect(() => {
        props.isSelected && ref.current.scrollIntoView();
    }, [props.isSelected]);

    return (
        <components.Option {...props} innerRef={ref} />
    );
};

This breaks keyboard navigation. When using arrow keys, the focused option is not visible if too far from the currently selected option.

[harryo]

The underlying issue is that the focused option is in view, rather than the selected option, and that is correct. But when opening the menu, the selection option should get focus, and hence appear in view. For a fix, see https://github.com/JedWatson/react-select/pull/3813, unfortunately still not merged....

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!