Make combobox play nicely with its background

[djfpaagman]

Currently the listbox is slightly visible when there are no results. This is only apparent on a non-white background:

This small css change hides the listbox unless there are visible options.

I'm not sure if this is the best approach, happy to work in a different direction if you prefer something else.

[josefarias]

Thanks for this @djfpaagman! The reason we gave the listbox a height is because it contains a lazy-loaded turbo-frame that turbo wasn't loading on some browsers when the frame wasn't visible.

So I think instead of hiding it, we should give it a transparent background. And I think this'd only be for .hw_combobox__pagination__wrapper and not the whole listbox. But I might be wrong.

Would you like to give that a try?

[djfpaagman]

Thanks for this @djfpaagman! The reason we gave the listbox a height is because it contains a lazy-loaded turbo-frame that turbo wasn't loading on some browsers when the frame wasn't visible.

Of course some browsers don't play nice 🙈

So I think instead of hiding it, we should give it a transparent background. And I think this'd only be for .hw_combobox__pagination__wrapper and not the whole listbox. But I might be wrong.

Would you like to give that a try?

Yes that seems to work as well! There is a downside: if you want to style the listbox now you basically have to put your css in a .hw-combobox__listbox:has([role="option"]:not([hidden])) selector, else it will still show up. Not sure if that's fixable with this approach though.

I've pushed a new commit, do you want me to squash them?

[josefarias]

Thanks @djfpaagman!

Seems like this has an unintended glitch in that the pagination wrapper will always be transparent, so you catch a quick flicker/glimpse of the background when quickly scrolling through the options. I think we can avoid that. Here are some screen captures, then a proposed solution:

Original, no changes:
You can see the pagination wrapper on first-click.

hwcb-no-changes.mp4

Always transparent (current PR)
You can't see the pagination wrapper on first-click — but you can see it as you scroll through the options.

hwcb-always-transparent.mp4

Only transparent when only-child (proposed change)
You can never see the pagination wrapper, as desired.

hwcb-only-child.mp4

Here are the proposed changes, feel free to apply them to the PR, or let me know if you have any other suggestions. Note that I've added a background color to the main wrapper. I think that could go out as part of these changes.

diff --git a/app/assets/stylesheets/hotwire_combobox.css b/app/assets/stylesheets/hotwire_combobox.css
index 473aa09..01ba916 100644
--- a/app/assets/stylesheets/hotwire_combobox.css
+++ b/app/assets/stylesheets/hotwire_combobox.css
@@ -1,6 +1,7 @@
 :root {
   --hw-active-bg-color: #F3F4F6;
   --hw-border-color: #D1D5DB;
+  --hw-component-bg-color: #FFFFFF;
   --hw-group-color: #57595C;
   --hw-group-bg-color: #FFFFFF;
   --hw-invalid-color: #EF4444;
@@ -63,6 +64,7 @@ .hw-combobox {
 }
 
 .hw-combobox__main__wrapper {
+  background-color: var(--hw-component-bg-color);
   border: var(--hw-border-width--slim) solid var(--hw-border-color);
   border-radius: var(--hw-border-radius);
   padding: var(--hw-padding--slim) calc(var(--hw-handle-width) + var(--hw-padding--slimmer)) var(--hw-padding--slim) var(--hw-padding--thick);
@@ -291,4 +293,8 @@ .hw-combobox--multiple {
 
 .hw_combobox__pagination__wrapper {
   background-color: var(--hw-option-bg-color);
+
+  &:only-child {
+    background-color: transparent;
+  }
 }

There is a downside: if you want to style the listbox now you basically have to put your css in a .hw-combobox__listbox:has([role="option"]:not([hidden])) selector, else it will still show up.

I think that's fine — it's the case currently so we're not introducing anything new. And it's a reality that, for now, the listbox needs to be visible to the browser (even if not to the user). So I think we're good to keep that behavior until we can think of a better solution for loading async options.

I've pushed a new commit, do you want me to squash them?

Nah, no worries!

[djfpaagman]

Took me a while to get back to it, but thanks a lot for the super thorough look and your cleaner proposed solution, I changed it verbatim so you can go ahead and merge if you want! Much appreciated!