Add ability to clear combobox programmatically

app/assets/javascripts/hw_combobox/models/combobox/filtering.js

@@ -14,6 +14,12 @@ Combobox.Filtering = Base => class extends Base {
     }
   }
 
+  clear(event) {
+    this._clearQuery()
+    this.chipDismisserTargets.forEach(el => el.click())
+    if (event && !event.defaultPrevented) event.target.focus()
+  }
+
   _initializeFiltering() {
     this._debouncedFilterAsync = debounce(this._debouncedFilterAsync.bind(this))
   }

test/dummy/app/controllers/comboboxes_controller.rb

@@ -102,6 +102,10 @@ def form_object
     @object = Form.new
   end
 
+  def external_clear
+    @user = User.first || raise("No user found, load fixtures first.")
+  end
+
   private
     delegate :combobox_options, :html_combobox_options, to: "ApplicationController.helpers", private: true
 

test/dummy/app/javascript/controllers/custom_clear_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static outlets = [ "hw-combobox" ]
+
+  clear(event) {
+    this.hwComboboxOutlets.forEach(outlet => outlet.clear(event))
+  }
+}

test/dummy/app/views/comboboxes/external_clear.html.erb

@@ -0,0 +1,16 @@
+<%= tag.style nonce: content_security_policy_nonce do %>
+  #external_clear:focus {
+    outline: 1px solid blue;
+  }
+<% end %>
+
+<%= button_tag "clear", id: :external_clear, data: {
+      controller: "custom-clear",
+      action: "custom-clear#clear",
+      custom_clear_hw_combobox_outlet: "[data-clearable]" } %>
+
+<%= combobox_tag "state", @state_options, value: "MI", id: "state-field", data: { clearable: "" } %>
+
+<%= form_with model: @user do |form| %>
+  <%= form.combobox :visited_state_ids, State.all, label: "Visited states", multiselect_chip_src: state_chips_path, data: { clearable: "" } %>
+<% end %>

test/dummy/config/routes.rb

@@ -30,6 +30,7 @@
   get "grouped_options", to: "comboboxes#grouped_options"
   get "morph", to: "comboboxes#morph"
   get "form_object", to: "comboboxes#form_object"
+  get "external_clear", to: "comboboxes#external_clear"
 
   resources :movies, only: %i[ index update ]
   get "movies_html", to: "movies#index_html"

test/system/hotwire_combobox_test.rb

@@ -1306,6 +1306,21 @@ class HotwireComboboxTest < ApplicationSystemTestCase
     assert_combobox_display_and_value "#form_state_id", "Alabama", states(:alabama).id
   end
 
+  test "clearing programmatically" do
+    visit external_clear_path
+
+    assert_combobox_display_and_value "#state-field", "Michigan", "MI"
+    assert_combobox_display_and_value "#user_visited_state_ids",
+      %w[ Florida Illinois ], states(:florida, :illinois).pluck(:id)
+
+    find("#external_clear").click
+
+    assert_combobox_display_and_value "#state-field", "", nil
+    assert_combobox_display_and_value "#user_visited_state_ids", [], nil
+
+    page.evaluate_script("document.activeElement.id") == "external_clear"
+  end
+
   private
     def open_combobox(selector)
       find(selector).click