Optional message to show for "no results found"

[searls]

I have a bunch of async comboboxes of exercises throughout my app and the UX always strikes me as weird that when a user types a word that doesn't match any of the known exercises in the library that it doesn't say anything. Maybe I missed it, but is there any way to display a non-interactive "No results found" HTML in the results area when nothing matches the user's query?

[josefarias]

is there any way to display a non-interactive "No results found" HTML in the results area when nothing matches the user's query?

Not yet! But it's something we should have. I'd welcome a PR for this (by anyone reading!), or I'll likely implement this at some point.

[josefarias]

Cross-posting some ideas I've had about this after reviewing @djfpaagman's PR

#220 (comment)

[djfpaagman]

@josefarias I did some code digging and thinking and want to propose the following:

• a new attribute for HotwireCombobox::Component, something like no_results, that accepts a string or something render accepts, which gets passed down from the helpers.
• a helper method somewhat similar to extract_blank_display_and_content to either render a default partial with the string or the custom renderable.
• Always render that it in _combobox.html.erb and hide/show it with css.

So the interface would become:

<%= combobox_tag "state", State.all, no_results: "No results found!" %>

<%= combobox_tag "state", State.all, no_results: { partial: "states/no_results" } %>

# etc..

I might code up something to see if this works later, feedback already welcome 😊

[josefarias]

@djfpaagman this looks promising! One thing to watch out for when hiding/showing with CSS is dealing with async pagination.

My first instinct is we should be able to show the message when it's an only-child. If I recall correctly, the turbo-frame which lazily loads paginated options sits at that same level in the listbox. Meaning the message would never get shown. Which is good to avoid flashing the message while options load — but bad because we've no way to show it when the backend literally returns no options!

It feels close enough that we should be able to figure it out. Just wanted to point out that potential complication.

Finally, let's go with empty_state for the kwarg. Open to suggestions but I think I like that better than no_results.

[djfpaagman]

Yeah i'm not entirely sure about it working perfectly with css, will have to experiment with that.

Otherwise toggling something like a hidden class in the stimulus controller could do the trick as well.