Automatically close react-select menu once the last item has been selected, instead of showing "No record"

[Vadorequest]

I use the option closeMenuOnSelect={false} so that I can keep selecting choice (no menu close between them), but there is no need to keep it displayed with a "No item" message once I've selected all of them, I'd like it to close automatically.

The user knows they've selected the last available item because they had the list visible and picked the last choice, there is no point displaying that message, which needs to click elsewhere to close the menu (extra useless action required).

The "No record" message should therefore only be displayed when we click again on the select, but not when we select the last item available.

This could either become an automatic behaviour when using closeMenuOnSelect={false}, or another option to keep the existing behaviour identical by default.

---

I first tried to ask if such option was available, but it doesn't seem so https://stackoverflow.com/questions/60138160/how-to-automatically-close-react-select-menu-once-the-last-item-has-been-selecte/60229941?noredirect=1#comment106538897_60229941

[nik72619c]

Is this issue free to work on ?

[Vadorequest]

I don't know, I guess nobody's working on it, but I don't know what's the process of contributing to react-select. See https://github.com/JedWatson/react-select/blob/master/CONTRIBUTING.md

I guess one of the main contributor should give a go before any actual development.

[flexdinesh]

Hey @Vadorequest, react-select API is pretty extensible. You can use a combination of exposed APIs to achieve what you want.

Something like this should work —
https://codesandbox.io/s/react-select-multi-select-auto-close-7sp0j

We don't want to auto close the options menu even if all options are selected 'cos the prop closeMenuOnSelect is deliberate and we don't want to change it at the moment. Although having one more prop for the behaviour is convenient, the value proposition is not much as we can use the exposed APIs to achieve the same outcome.

[flexdinesh]

Hey @Vadorequest, I'm closing this issue now as this is possible with the APIs exposed. If you have further questions, feel free to reopen it.

[isacvale]

Hello, I have a further question, thanks. How to recreate the current functionality. I mean, there are a few snippets on how to control the menu via menuIsOpen, but following them means losing the built-in functionality (for that I mean the events that open and close the menu by default).

I'd be happy if I could tell Select something on the likes of "by the way, keeping your current functionality, please also close the menu if the user scrolls past some point" or "please also, open this menu if the required prop is passed in and no selection was yet done".

But I'd be content enough to know on what events should I close the panel, to recreate the current functionality, so I can append to it.