Multivalue menu focuses to first option on enter

[chrispobs]

trafficstars

Version react-select: 5.2.1

Issue is when I have enough options for the menu to scroll. The Menu works fine if i use the mouse but when i use my keyboard and navigate down and select by pressing Enter key. The focus of the option goes to first option. Is there a way to prevent this?

[Technologeek]

@chrispobs Do you have a CodeSandbox to reproduce this? I tested your use-case it works fine for me.

[Rutra-Selvi-Thavamani]

I'm also having the same issue. how could i sort it out

[HarlesPilter]

I think this happens when the parent component re-renders when an option is selected (controlled select). And if you haven't memoized the options array then the menu list re-renders (and loses focus). Set closeMenuOnSelect={false} and isMulti={true} so the menu stays open after selection.

This doesn't work ❌

This works ✅

Even though this is fixable on the app side by memoized options, I think this should still be fixed on the component side. Or at least documented.

Edit: Added a codesandbox