Refactor

app/javascript/controllers/bar_controller.js

@@ -22,12 +22,6 @@ export default class extends Controller {
     this.#hideItem(this.searchTarget)
   }
 
-  clearInput(event) {
-    if (event.detail.isAlreadyEmpty) {
-      this.reset()
-    }
-  }
-
   showModalAndSubmit(event) {
     this.showModal()
     this.formTarget.requestSubmit()

app/javascript/controllers/search_form_controller.js

@@ -4,14 +4,11 @@ export default class extends Controller {
   static targets = ["searchInput"]
 
   clearInput() {
-    this.dispatch("clear", { detail: { isAlreadyEmpty: this.isEmpty } })
-    if (!this.isEmpty) {
+    if (this.searchInputTarget.value) {
       this.searchInputTarget.value = ""
       this.searchInputTarget.focus()
+    } else {
+      this.dispatch("reset")
     }
   }
-
-  get isEmpty() {
-    return !this.searchInputTarget.value
-  }
 }

app/views/searches/_form.html.erb

@@ -2,7 +2,7 @@
   class: "search__form flex align-center justify-center gap-half",
   data: {
     controller: "search-form",
-    action: "search-form:clear->bar#clearInput",
+    action: "search-form:reset->bar#reset",
     bar_target: "form",
     turbo_frame: defined?(target_turbo_frame) ? target_turbo_frame : nil } do |form| %>
   <%= form.label :q, "Search Fizzy", class: "font-weight-black txt-nowrap" %>