Autocomplete: hide popup on zero suggestions

[MatthiasvB]

Describe the feature in detail (code, mocks, or screenshots encouraged)

Currently, the emptyState prop allows us to pass in some HTML to be displayed when no search results match. However, there are usecases where one may not only let the user choose between predefined options but also to provide custom content. In this case, it is annoying to still see "No Results found" or any similar content. I would want the autocomplete popup to simply disappear.

This could be implemented using a simple boolean flag hideOnNoSuggestions or, possibly allowing for even greater flexibility, by providing access to the currently available suggestions, allowing the developer to add custom styling (such as display: none).

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

No response

[phamduylong]

Never used the Autocomplete component before, but isn't regionEmpty prop used for this? I think this could work for your purpose:

<Autocomplete regionEmpty="hidden" />

[endigo9740]

Never used the Autocomplete component before, but isn't regionEmpty prop used for this? I think this could work for your purpose:

<Autocomplete regionEmpty="hidden" />

Unfortunately no, that's a "style prop" intended for accepting utility class styles for the empty region of the template.

[phamduylong]

Never used the Autocomplete component before, but isn't regionEmpty prop used for this? I think this could work for your purpose:

<Autocomplete regionEmpty="hidden" />

Unfortunately no, that's a "style prop" intended for accepting utility class styles for the empty region of the template.

Isee. A flag like hideOnNoSuggestions should be simple enough. If this is an acceptable solution, can you assign it to me? I'll throw a PR ASAP.

[endigo9740]

@phamduylong thanks for volunteering. I'm currently out of office today, but let me circle back to this one first. My gut is telling me a wrapping conditional might accomplish what's being asked here. Though I can understand the desire to handle it within the component too. If we go forward with the latter I'll ping you and assign the ticket.