Scroll position inside dropdown does not reflect selected value on first render

[dinohamzic]

Hello 👋

This is a small bug with dropdown scroll position that is causing minor frustrations from a UX perspective.

On first render, scroll position in the dropdown always starts at the top, even when a default value is set (either via defaultValue or via value props).

Examples:

• https://codesandbox.io/s/react-select-v5-sandbox-forked-372xo?file=/example.js
• https://codesandbox.io/s/angry-christian-17gw6?file=/src/App.js

Screencap:

---

In the above gif, you can see that on first open "Wisconsin" is not visible in the dropdown list, instead scroll position starts at the top.

On the other hand, when selecting "Vermont" and reopening the dropdown, scroll position is behaving as expected.

[Rall3n]

Hello @dinohamzic,

thanks for submitting this issue.

To clear things up: this is not a problem with positioning, but instead a problem of value equality.
To figure out which option in the menu to focus on we compare the objects with the object of the (first) selected value. In other words, we check if the objects are the same.

Based on this you could use a value from your list of options instead of setting a static value, with which this will work.
But of course this would be difficult in an async environment.

I think the best alternative for this would be to use the prop getOptionValue for comparison.

I will try to bring this up in one of our next meetings and determine if this is the best option.

[dinohamzic]

This makes sense, thanks for clarifying @Rall3n! 🙏

But of course this would be difficult in an async environment.

Indeed this is one of our use cases, working around it would lead to non ideal implementations.