search

skeletonlabs / skeleton

A complete design system and component solution, built on Tailwind.
https://skeleton.dev
MIT License
5.18k stars 327 forks source link

Autocomplete: hide popup on zero suggestions #2873

Open MatthiasvB opened 1 month ago

MatthiasvB commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

@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.