Open listbox only if input element has a value

[robinboening]

I am using the combobox as a search bar (youtube style) and I don't present any options before the user actually starts typing.
Right now, the empty listbox pops up anyway as soon as I click the input element. So I am wondering if there is a simple way to not open the listbox right away when there is no valid value yet?

If this isn't possible right now, I'd like to hear if this is something you would consider implementing, or if you are open to accepting a PR for this.

Thank you!
Robin

[josefarias]

Hey @robinboening thanks for offering to create a PR.

Yes, I think this'd make sense. Gut instinct is the simplest implementation would be css-only — hiding the listbox when there are no options inside it (or only showing it if there are options inside).

[robinboening]

You were right, I was able to solve it using the has css selector. 🥳

.hw-combobox__listbox {
  display: none;
}

.hw-combobox__listbox:has(.hw-combobox__option) {
   display: block;
 }

[josefarias]

Sweet! If you're up for making a PR I'd be happy to merge this into the default library styles.

No worries if not or if you're short on time

[robinboening]

PR is in: #179

What crossed my mind now is that in the case when no options available, one might want some kind of user feedback by providing an alternative message. This might not be relevant for a dropdown, but for a free text search, like "No results found, but you can go ahead and explore yourself [link]"

[josefarias]

Hm yeah that's interesting. There's been discussions about providing a generic slot to insert anything into. One such use case could be this sort of empty-state message. Should probably tackle that separately.

[josefarias]

Closing per #179 (comment)