Delegate clearing the input to new controller

app/javascript/controllers/bar_controller.js

@@ -22,11 +22,8 @@ export default class extends Controller {
     this.#hideItem(this.searchTarget)
   }
 
-  clearInput() {
-    if (this.searchInputTarget.value) {
-      this.searchInputTarget.value = ""
-      this.searchInputTarget.focus()
-    } else {
+  clearInput(event) {
+    if (event.detail.isAlreadyEmpty) {
       this.reset()
     }
   }

app/javascript/controllers/search_form_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["searchInput"]
+
+  clearInput() {
+    this.dispatch("clear", { detail: { isAlreadyEmpty: this.isEmpty } })
+    if (!this.isEmpty) {
+      this.searchInputTarget.value = ""
+      this.searchInputTarget.focus()
+    }
+  }
+
+  get isEmpty() {
+    return !this.searchInputTarget.value
+  }
+}