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

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

[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.