Feature Request / Use case clarification

I want to be able to render a message in the dropdown when there are no results. I tried using the renderSuggestionsContainer prop, however it seems that the dropdown is closed upon no results. There’s probably a way to do this with the existing props, but theres so many ways to do this.

---

Potential solutions:

A) Could add an explicit prop closeOnNoResults which defaults to true, but when set to false will not close the dropdown upon no results. B) Some sort of weird css class fix on my side (seems really messy) C) Make the component such that if there are no results it’s still invisible, unless you are defined renderSuggestionsContainer to render other items. (tricky as container padding etc would mess things up) D) Making the state of the popover controllable by the end user (me) and having simple steps to do this.

Seeming solutions which aren’t:

• Using alwaysRenderSuggestions - as I still want to hide it onBlur, and preserve the other functionality

[james-ff]

I managed to achieve this effect via a workaround until the feature is implemented. I used a boolean in state to track when suggestions should be shown and should not. When text is entered and results should not be shown (ie. no results message should be shown), set suggestions to anything so that it displays the dropdown and in the function “renderSuggestionsContainer” don’t display the children contents (which will contain the suggestions that you entered just to make the dropdown show). I also made “renderSuggestionsContainer” a method of the component class so that it has access to “this” and consequently “this.state”. Code below to illustrate:

renderSuggestionsContainer = ({ containerProps, children, query }) => {
    const resultsHeader = (
      <div style={{ margin: "9px 20px", fontSize: "14px", color: "#777" }}>
        Select a Single Card to Compare
      </div>
    );
    const noResultsHeader = (
      <div style={{ margin: "9px 20px", fontSize: "14px", color: "#777" }}>
        No card names contain "{query}"
      </div>
    );
    return (
      <div {...containerProps}>
        {!this.state.noSuggestions && resultsHeader}
        {!this.state.noSuggestions && children}
        {this.state.noSuggestions && noResultsHeader}
      </div>
    );
  }

Example of when text is entered but it gives no suggestions ([“INVALID”] can be replaced with whatever as its contents are not going to be displayed, but suggestions must be non-empty as this is what will cause the dropdown to display):

this.setState({
    suggestions: json.data.length === 0 ? ["INVALID"] : json.data,
    noSuggestions: json.data.length === 0
});

[davidfurlong]

Thats a creative solution, thanks for sharing @james-ff