Fix not focusing the selected value on menu open

[Tirzono]

Bug

When opening the react select menu, the focused option is not scrolled into the view:

https://codesandbox.io/s/autumn-wind-l3ed8

Fix

The first effort was made in PR #3813, but since the author of the PR is not responding anymore, I decided to have a look myself and try to fix this issue. It turns out that commit 8ee3cea in PR #3569 was breaking the autofocus on menu opening, as the menuOptions in the openMenu was empty, because it was only set after onMenuOpen was called (and thus UNSAFE_componentWillReceiveProps). Now we set the menuOptions in openMenu already.

I've made buildMenuOptions memoized, so that it does not run the function again if the props that the function uses didn't change.

[changeset-bot]

🦋 Changeset is good to go

Latest commit: 616accf

We got this.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Tirzono]

I am not experienced enough with Flow and I have no clue how to solve the flow check. It's probably something simple, so let me know how to fix this issue (or feel free to edit my PR).

[Tirzono]

I can remove the memoizing part to make the build pass, if that would speed up the merging and reviewing of this PR. It would be a bit more inefficient, but it would fix the bug.

[mathieulj]

The flow errors can be resolved as follows (* note this may not follow best practices):

-      (newArgs: [Props, OptionsType], lastArgs: [Props, OptionsType]) => {
-        const [newProps, newSelectValue] = newArgs;
-        const [lastProps, lastSelectValue] = lastArgs;
+      (newArgs: any, lastArgs: any) => {
+        const [newProps, newSelectValue] = (newArgs: [Props, OptionsType]);
+        const [lastProps, lastSelectValue] = (lastArgs: [Props, OptionsType]);

-  buildMenuOptions(props: Props, selectValue: OptionsType): MenuOptions {
+  buildMenuOptions = (props: Props, selectValue: OptionsType): MenuOptions => {
...
-  }
+  };

[Tirzono]

I can see why it would not follow the best practices, but it at least it passes the build now. Up to @JedWatson to decide if he can live with this. Thank you for your help @mathieulj.

[Tirzono]

Or maybe @mitchellhamilton wants to have a look at it? :)

[Tirzono]

Hi @flexdinesh, as per your comment in #3910, would you mind have a look at this PR? :)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[berghall]

This is a must-have!

[akomatsu-indeed]

@JedWatson @Tirzono , any movement here? this bug is blocking us from upgrade to 3.0.8. And 3.0.3 is using componentWillReceiveProps() which is bad too.

[Tirzono]

@akomatsu-indeed unfortunately not. The PR is ready to be merged. @flexdinesh mentioned in #3910 that he will have a look at it, but since then it's silent again. For now you can use react-select-reborn (as discussed in #3910 too):

npm i react-select-reborn

The fix has been merged to that fork. Until the maintainers will be back, please use that fork.

[akomatsu-indeed]

Thanks a lot @Tirzono

[flexdinesh]

@Tirzono Thanks for the PR. As mentioned in the other comment, we're still ramping up the backlog and you can see more movement in the repo going forward. I've merged this now. I'll add a note here once the patch is released to npm. Thanks again for your patience.

[flexdinesh]

@Tirzono This fix has been released in version 3.1.0. Thanks again!

https://github.com/JedWatson/react-select/blob/master/packages/react-select/CHANGELOG.md#310

[Tirzono]

Thank you @flexdinesh, much appreciated!

[andreme]

Not working when using defaultMenuIsOpen or menuIsOpen: https://codesandbox.io/s/zealous-leaf-58ett?file=/src/index.js

It is working when using openMenuOnFocus (and autoFocus).

[Tirzono]

@andreme You are using an old version in your Codesandbox that doesn't contain this fix.

[andreme]

@Tirzono Sorry, I didn't realise I need to save manually. Updated and showing the issue: https://codesandbox.io/s/zealous-leaf-58ett?file=/src/index.js

[Tirzono]

I see. Do you mind opening a new issue for this (if there is none already)? I'll have a look if I can find a fix.

[asazernik]

Bookkeeping note: GH issue for original problem is #3656.

[zzhcch]

@andreme i think the issue in your example is caused by your dataSource which is populating each time along with re-render.
try to move this out of the function or use useMemo would solve the problem.

[andreme]

@zzhcch No, that's not it, I've updated the example
#4013

[zzhcch]

@andreme Ok, I got your point. that seems like an underlying issue.
here is some workaround: #3375