Update single select search behaviour

This change brings a behaviour similar to the one
that common HTML selects have, on top of some of
TomSelect niceties.

By default, TomSelect would include a search input
in single select mode, even when there is an option
selected, which is uncommon. So instead, we keep
search box visible only when there is nothing
selected. As soon as user selects an option, select
box gains "opacity-0" and therefore hides the
confusing search box effects (caret and ability to
type ahead). However, since a usual HTML select
responds to user's typing by highlighting matched
option (if any), we can replicate this logic because
 technically the input is not gone, and it still
 responds to user input. If user types while the
 select is focused, the options will be filtered and
  highlight will be applied (TomSelect defaults),
  however if filter search returns 0 options - we
  reset the search term to empty string and options
  displayed to show full list again.

Author: chaimann

admin/app/components/solidus_admin/ui/forms/select/component.rb

@@ -68,6 +68,10 @@ def initialize(label:, name:, choices:, size: :m, hint: nil, tip: nil, error: ni
     input_classes = ["[&_input]:has-[.item]:placeholder:invisible [&_input:disabled]:cursor-not-allowed [&_input:disabled]:bg-gray-50
       [&_input]:peer-invalid:placeholder:text-red-400"]
 
+    unless @attributes[:multiple]
+      input_classes << "[&_input]:has-[.item]:opacity-0 [&_input]:has-[.item]:cursor-default"
+    end
+
     dropdown_classes = ["[&_.dropdown]:w-full [&_.dropdown]:absolute [&_.dropdown]:border [&_.dropdown]:border-gray-100
       [&_.dropdown]:mt-0.5 [&_.dropdown]:min-w-[10rem] [&_.dropdown]:p-2 [&_.dropdown]:rounded-sm [&_.dropdown]:z-10
       [&_.dropdown]:shadow-lg [&_.dropdown]:bg-white"]

admin/app/javascript/solidus_admin/web_components/solidus_select.js

@@ -26,6 +26,12 @@ class SolidusSelect extends HTMLSelectElement {
         this.setTextboxValue("");
         if (originalSelect.multiple) this.refreshOptions();
       },
+      onType: function() {
+        if (!originalSelect.multiple && !this.currentResults.items.length) {
+          this.setTextboxValue("");
+          this.refreshOptions();
+        }
+      },
     });
 
     originalSelect.setAttribute("synced", "true");