Replace custom search select with hotwire combobox

Gemfile

@@ -20,6 +20,7 @@ gem "lucide-rails", github: "maybe-finance/lucide-rails"
 # Hotwire
 gem "stimulus-rails"
 gem "turbo-rails"
+gem "hotwire_combobox", "~> 0.3.2"
 
 # Other
 gem "faraday"

Gemfile.lock

@@ -203,6 +203,10 @@ GEM
       actioncable (>= 6.0.0)
       listen (>= 3.0.0)
       railties (>= 6.0.0)
+    hotwire_combobox (0.3.2)
+      rails (>= 7.0.7.2)
+      stimulus-rails (>= 1.2)
+      turbo-rails (>= 1.2)
     httparty (0.22.0)
       csv
       mini_mime (>= 1.0.0)
@@ -454,6 +458,7 @@ DEPENDENCIES
   erb_lint
   faraday
   hotwire-livereload
+  hotwire_combobox (~> 0.3.2)
   importmap-rails
   jbuilder
   lucide-rails!

app/assets/stylesheets/application.tailwind.css

@@ -87,4 +87,38 @@
     @apply text-[#737373] text-sm;
   }
 
-}
+  .search-combobox {
+    .hw-combobox {
+      @apply w-full;
+    }
+
+    .hw-combobox__main__wrapper {
+      @apply relative bg-white border rounded-md shadow-xs border-alpha-black-100;
+      @apply focus-within:shadow-none focus-within:border-gray-900 focus-within:ring-4 focus-within:ring-gray-100;
+
+      @apply flex rounded-[10px] shadow-xs w-full text-sm justify-start items-center px-3 pr-7 text-ellipsis h-9;
+    }
+
+    &:has(label:not(:empty)) .hw-combobox__main__wrapper {
+      @apply h-14 pt-7;
+    }
+
+    .hw-combobox__label {
+      @apply absolute top-2 left-3 text-xs text-gray-500 z-10;
+    }
+
+    .hw-combobox__listbox {
+      @apply absolute top-[110%] right-0 w-full border border-black/10 bg-white rounded shadow-xs p-1 z-30;
+    }
+
+    .hw-combobox__option {
+      @apply flex items-center justify-start w-full px-2 py-1 min-h-9 text-sm text-black rounded cursor-pointer hover:bg-alpha-black-50;
+    }
+
+    --hw-handle-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
+    --hw-handle-width: 16px;
+    --hw-handle-height: 16px;
+    --hw-handle-offset-right: 12px;
+  }
+
+}

app/views/layouts/application.html.erb

@@ -38,6 +38,7 @@
 
     <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+    <%= combobox_style_tag %>
     <%= javascript_importmap_tags %>
     <%= hotwire_livereload_tags if Rails.env.development? %>
     <%= turbo_refreshes_with method: :morph, scroll: :preserve %>

app/views/shared/_search_select.erb

@@ -1,27 +1,7 @@
-<div class="relative flex self-end gap-2 w-full" data-controller="search-select" data-search-select-active-class="bg-gray-100" data-search-select-list-value="<%= list %>">
-  <%= tag.input type: :hidden, name: name,
-        disabled: local_assigns[:disabled],
-        data: { search_select_target: "hiddenInput", auto_submit_form_target: "auto" } %>
-
-  <div class="relative w-full">
-    <% if local_assigns[:label].present? %>
-      <label class="absolute top-2 left-3 text-xs text-gray-500 z-10">
-        <%= label %>
-      </label>
-    <% end %>
-
-    <%= tag.input type: "text", placeholder: placeholder,
-          required: local_assigns[:required], disabled: local_assigns[:disabled],
-          data: { search_select_target: "input" }, class: [
-          "form-field flex rounded-[10px] shadow-xs w-full text-sm justify-start items-center px-3 pr-7 text-ellipsis",
-          { "h-14 pt-7": local_assigns[:label].present?, "h-9": local_assigns[:label].blank? } ] %>
-
-    <%= lucide_icon "search", class: [
-          "h-4 w-4 text-gray-500 absolute right-3 transform -translate-y-1/2",
-          { "top-[67%]": local_assigns[:label].present?, "top-1/2": local_assigns[:label].blank? } ] %>
-  </div>
-
-  <ul class="hidden absolute top-[110%] right-0 w-full border border-black/10 bg-white rounded shadow-xs p-1 z-30" data-search-select-target="list">
-    <%# Populated by stimulus %>
-  </ul>
+<div class="search-combobox">
+  <%= combobox_tag name, JSON.parse(local_assigns[:list]).map { [_1["value"] + " " + _1["name"], _1["value"] ] },
+    label: label,
+    placeholder: placeholder,
+    required: local_assigns[:required],
+    disabled: !local_assigns[:required] %>
 </div>