React-select: noresultstext message stays after user clears field

[KingstonDuo]

I am using select.async and wanted to specify a different error message when the user gets no results given their search, so I have specified a value for noResultsText. When the user searches for something that returns no results, I get the expected message.

However, after getting the no results message, if I backspace to clear the field completely I continue to get the no results message instead of the search prompt.

If I then begin typing in the search field, I will get the search prompt (since I have it set to perform a search after two characters).

I believe this is a bug. If the user clears the search field, the search prompt should be restored rather than showing the no results message.

[KingstonDuo]

Additionally, in order to simulate a minlength on the field (only do a fetch from the back-end if a certain number of characters have been typed in the field), we have created our own loadOptions method which returns a promise with 0 results when the length of the input field is less than our number of characters we want before performing a search (in our case 2).

This causes the noresultstext message to show when a user types a single character. While I am not sure that this is a bug in your code, it would be great to have the ability to have the minlength property so we don't perform a search before x number of characters are typed, thus avoiding the erroneous error message.

[jklotz]

I am having the exact same issue.

It also appears that when noresultstext is rendered we are getting the input value from the select state which doesn't seem to have been updated yet.

inputValue() { if (this.select) { return this.select.state.inputValue; } return ''; }

noResultsText() {
    const { loadingPlaceholder, noResultsText, searchPromptText } = this.props;
    const { isLoading } = this.state;
    const inputValue = this.inputValue();

    if (isLoading) {
        return loadingPlaceholder;
    }
    if (inputValue && noResultsText) {
        return noResultsText;
    }
    return searchPromptText; }

So if we enter a character into our typeahead, "a", and there was previously nothing entered inputValue is "" and thus the searchPromptText is shown rather than noResultsText.

[AlexandrLi]

Hi everyone. Any updates for this issue? @KingstonDuo were you successful in solving this issue? I'm facing this problem too on my project.

[rlreamy]

@AlexandrLi : Hi, I am one of the people behind KingstonDuo and we did not find a resolution. We simply left this as a known issue.