Toggle clear icon color

AllYourBot · Dec 7, 2024 · 5b07ce9 · 5b07ce9
1 parent 8614591
commit 5b07ce9
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/app/javascript/stimulus/search_controller.js b/app/javascript/stimulus/search_controller.js
@@ -1,7 +1,12 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = [ "input" ]
+  static targets = [ "input", "clear" ]
+
+  connect() {
+    this.cursorToEnd()
+    this.setSearchClearIcon()
+  }
 
   cursorToEnd() {
     this.inputTarget.selectionStart =
@@ -20,4 +25,12 @@ export default class extends Controller {
       this.element.requestSubmit()
     }, 900)
   }
+
+  setSearchClearIcon() {
+    if (this.inputTarget.value.length > 0) {
+      this.clearTarget.classList.add("text-gray-800")
+    } else {
+      this.clearTarget.classList.remove("text-gray-800")
+    }
+  }
 }
diff --git a/app/views/messages/_nav_column.html.erb b/app/views/messages/_nav_column.html.erb
@@ -54,7 +54,7 @@
         variant: :mini,
         size: 18,
         class: "cursor-pointer absolute right-1 top-1/2 transform -translate-y-1/2",
-        data: { action: "click->search#clear" }
+        data: { search_target: "clear", action: "click->search#clear" }
       %>
     </div>
   <% end %>