Clarifying behavior of `shouldRenderSuggestions`

Are you reporting a bug? Yes

• Codepen: https://codepen.io/oyeanuj/pen/vWqaQW

• Steps

  1. Focus on the input field
  2. Type c, and wait for suggestions to appear
  3. Notice the dropdown with custom footer.
  4. Delete c and instead enter d
  5. Dropdown doesn’t open. Note that shouldRenderSuggestions is true at this point.

  Observed behaviour: Suggestions’ container are closed

  Expected behaviour: Suggestions’ container should stay open, since shouldRenderSuggestions is returning true.

Essentially, I am trying to show a catch-all situation where if no results exist, the user can do something else. But the container isn’t opening when shouldRenderSuggestions is true unless results exists. That seems like contradictory behavior.

Thoughts?

And as always, thank you for keeping this library going!

[taykcrane]

@oyeanuj I think I suffered from the same problem as you, and was able to solve this using the current Autosuggest solution.

In the below code, I ensure that the suggestions container always displays. Then, I use the renderSuggestionsContainer method to render any suggestions (when they exist), and if they don’t exist AND the query is > 1, I render something else in it’s place. Now, I get the desired effect of seeing “Add New Member” when no suggestions are returned.

.react-autosuggest__suggestions-container {
      display: block;
    }

.react-autosuggest__suggestions-container--open {
      display: block;
    }

  renderSuggestionsContainer = ({ containerProps, children, query }) => {
    return (
      <div {...containerProps}>
        <div className="suggestions-container">
          <div className="children">{children}</div>
          {!children && query.length > 1 ? (
            <div className="add-member-button">Add New Member</div>
          ) : null}
        </div>
      </div>
    );
  };

  shouldRenderSuggestions = () => {
    return true;
  };

[caguthrie]

@oyeanuj or @moroshko were you able to make any progress here? If not, I can take a look and potentially raise a PR. Just don’t want to do work if it was already done.