Menu should scroll to defaultValue upon opening

Request

When opening the menu, if the option represented by defaultValue is not visible, the menu container should scroll such that the option is in view.

Use case

When there is a dropdown contains many values (birth year, countries, states) and the pre-selected option is not near the top it takes a lot of scrolling to find. Also, the use of arrow keys is a bit wonky since they still work (e.g. up/down selects the previous/next option) but you cannot see the selection moving so it appears that the keystrokes don’t work.

Demo

This should select 2002 by default but does not: https://codesandbox.io/s/32pwzwxom (Note that if you manually select a value the menu will open to that value next time, but it does not work that way on the initial render.)

Here is a modified version, thanks to @cdoshi on Stack Overflow, which demonstrates the requested behavior (again, it should open with 2002 selected): https://codesandbox.io/s/kkw5r17ry5

[naffiq]

For anyone who don’t want to follow a link, this is what you should do to fix this behavior:

Instead of passing new value object, pass the one from your options array:

<Select 
  options={options}
  value={options.find(({value}) => this.state.currentValue === value)}
/>

Hope this helps.

[ebonow]

Greetings @AndresHMosqueda,

I am not able to replicate the issue. Please verify that this works for you.

https://codesandbox.io/s/immutable-rgb-s945p?file=/src/App.js