React-select: Disabling NoOptionsMessage

[nkov]

Currently it doesn't seem as though there's a way to disable the "NoOptions" message entirely. You can set it to a different text, or style it with a custom component, but you cannot set it to null and remove the component, like you can with ie. IndicatorSeparator. Setting NoOptionsMessage component to null results in a rendering error and setting it to () => null results in a blank rounded box as shown here: https://codesandbox.io/s/react-codesandboxer-example-0exfd

Would be nice to be able to disable the message entirely, ie. by setting the component to null.

[MartinWebDev]

+1 for wanting a way to do this.
I'd like control over it because I'd like the dropdown to be invisible when no text is in the textbox, but still show "No Options" if nothing is returned from my api but there is some text entered.

[noetix]

Try openMenuOnClick={false} to disble the menu from opening when you click. Results will open the menu, including in the event that there are no options.

[AkshayHere]

Try openMenuOnClick={false} to disble the menu from opening when you click. Results will open the menu, including in the event that there are no options.

It gives me an 'No options' message even before API call is made :( . Would love to have an option to hide this mesage

[jnelken]

There is a way to fix this: use the noOptionsMessage top-level prop (not the same as the components object prop value) and set it to () => null

https://codesandbox.io/embed/react-codesandboxer-example-egds8

[vnellore]

Thanks for the code. It works perfectly.

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!