Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5

github_iconTop GitHub Comments

flexdineshcommented, Feb 20, 2020

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 —

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.

flexdineshcommented, Feb 21, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to automatically close react-select menu once the last ...
There's a react-select functionality where you can set the props noOptionsMessage to null so the menu will close when there are no more ......
Read more >
Advanced - React Select
Custom Filter logic. While React-Select assumes a standard way of filtering the menu on search, our api allows you to customise that filtering...
Read more >
Customize a reusable React dropdown menu component
We need to be able to toggle the dd-list upon clicking dd-header and close it when the user clicks outside of the dd-wrapper...
Read more >
@nubisoft/react-select - npm
When the value is changed, onChange(selectedValueOrValues) will fire. Note that (as of 1.0) you must handle the change and pass the updated ...
Read more >
How to Capture the Value of Dropdown Lists with React ...
A dropdown list can be drawn closer to a regular input field since, ... After the onSelect event has been set to watch...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found