Add clear button visibility check for search input

This commit introduces an automatic check for the visibility of the clear search button in relation to the search field input. Co-Authored-By: Elia Schito <[email protected]>
solidusio · Aug 2, 2023 · fd896c7 · fd896c7
1 parent b17fef6
commit fd896c7
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/admin/app/components/solidus_admin/ui/table/component.html.erb b/admin/app/components/solidus_admin/ui/table/component.html.erb
@@ -35,9 +35,13 @@
           placeholder="<%= t('.search_placeholder', resources: resource_plural_name) %>"
           class="w-full placeholder:text-gray-400 py-1.5 px-10 bg-white rounded border border-gray-300"
           data-<%= stimulus_id %>-target="searchField"
-          data-action="<%= stimulus_id %>#search"
+          data-action="<%= stimulus_id %>#search input-><%= stimulus_id %>#clearButtonVisibility"
+        >
+        <button
+          class="absolute right-0 mr-3"
+          data-<%= stimulus_id %>-target="clearButton"
+          data-action="<%= stimulus_id %>#clearSearch"
         >
-        <button class="absolute right-0 mr-3" data-action="<%= stimulus_id %>#clearSearch">
           <%= render @icon_component.new(name: 'close-circle-fill', class: "w-[1.4em] h-[1.4em] fill-gray-500") %>
           <span class="sr-only"><%= t('.clear') %></span>
         </button>

diff --git a/admin/app/components/solidus_admin/ui/table/component.js b/admin/app/components/solidus_admin/ui/table/component.js
@@ -10,6 +10,7 @@ export default class extends Controller {
     "searchToolbar",
     "searchField",
     "searchForm",
+    "clearButton",
     "filterToolbar",
     "defaultHeader",
     "batchHeader",
@@ -46,6 +47,7 @@ export default class extends Controller {
 
   clearSearch() {
     this.searchFieldTarget.value = ''
+    this.clearButtonVisibility()
     this.search()
   }
 
@@ -56,6 +58,10 @@ export default class extends Controller {
     this.render()
   }
 
+  clearButtonVisibility() {
+    this.clearButtonTarget.classList.toggle('hidden', this.searchFieldTarget.value === '')
+  }
+
   selectRow(event) {
     if (this.checkboxTargets.some((checkbox) => checkbox.checked)) {
       this.modeValue = "batch"
@@ -83,6 +89,8 @@ export default class extends Controller {
   }
 
   render() {
+    this.clearButtonVisibility()
+
     const selectedRows = this.checkboxTargets.filter((checkbox) => checkbox.checked)
 
     this.searchToolbarTarget.toggleAttribute("hidden", this.modeValue !== "search")