feature(search): add clear keyword button

TelosLabs · Jan 25, 2024 · 3fb70bb · 3fb70bb
1 parent a9599ca
commit 3fb70bb
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 24 deletions.
diff --git a/app/components/search_bar/component.html.erb b/app/components/search_bar/component.html.erb
@@ -1,11 +1,34 @@
-<div id="search-bar" class="inset-x-0 z-20 px-6 py-4 sticky bg-gradient-to-r from-blue-gradient-2 to-blue-gradient-1 top-20 md:top-22.75">
-  <div class="flex flex-row items-center justify-center md:gap-5">
-    <div class="relative w-full max-w-xl h-46px">
-      <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-        <%= inline_svg_tag "solid_search.svg", class: 'h-4 w-4 fill-current text-gray-2' %>
-      </div>
-      <%= @form.search_field :keyword, value: "#{ params.dig('search', 'keyword') }", class: 'block pl-8 h-46px w-full py-3.5 px-4 rounded-6px text-base text-gray-3 focus:outline-none', placeholder: 'Try “Mental Health Nonprofits”'%>
-    </div>
-    <%= @form.submit 'Search', class: 'invisible w-0 md:w-36 p-0 md:visible md:flex cursor-pointer uppercase flex-row justify-center items-center bg-seafoam md:py-4 md:px-10 rounded-6px text-blue-dark text-base font-bold focus:outline-none mx-2'%>
+<div id="search-bar" class="sticky inset-x-0 z-20 flex items-center justify-center px-6 py-4 
+bg-gradient-to-r from-blue-gradient-2 to-blue-gradient-1 top-20 md:top-22.75 md:gap-5">
+  <%# Keyword input %>
+  <div class="relative w-full max-w-xl">
+    <span class="absolute inset-y-0 left-0 flex items-center px-3 pointer-events-none">
+      <%= inline_svg_tag "solid_search.svg", class: 'h-4 w-4 fill-current text-gray-2' %>
+    </span>
+
+    <%= @form.search_field(
+      :keyword,
+      value: "#{ params.dig('search', 'keyword') }",
+      class: 'block px-10 h-46px w-full py-3.5 px-4 rounded-6px text-base text-gray-3 focus:outline-none',
+      placeholder: "Try \"Mental Health Nonprofits\"",
+      data: {
+        action: "input->search#displayClearKeywordButton",
+        search_target: "keywordInput"
+      }
+    ) %>
+
+    <button
+    type="button"
+    class="absolute inset-y-0 right-0 px-3 <%= "hidden" unless params.dig('search', 'keyword').present? %>"
+    data-search-target="clearKeywordButton"
+    data-action="click->search#clearKeywordInput">
+      <%= inline_svg_tag "x-icon.svg", class: "w-3.5 h-3.5 icon", aria_hidden: true %>
+    </button>
   </div>
+
+  <%# Search Button %>
+  <%= @form.submit(
+    'Search',
+    class: "invisible w-0 p-0 rounded-md text-blue-dark font-bold uppercase bg-seafoam md:py-4 md:px-10 md:w-36 md:visible focus:outline-none"
+  )%>
 </div>
diff --git a/app/javascript/controllers/search_controller.js b/app/javascript/controllers/search_controller.js
@@ -2,20 +2,23 @@ import { Controller } from "@hotwired/stimulus"
 import { useDebounce, useDispatch } from 'stimulus-use'
 
 export default class extends Controller {
-  static get targets() {
-    return [
-      "input",
-      "customInput",
-      "form",
-      "pill",
-      "advancedFilters",
-      "pillsCounter",
-      "pillsCounterWrapper",
-      "filtersIcon",
-    ]
-  }
+  static targets = [
+    "keywordInput",
+    "clearKeywordButton",
+    "input",
+    "customInput",
+    "form",
+    "pill",
+    "advancedFilters",
+    "pillsCounter",
+    "pillsCounterWrapper",
+    "filtersIcon"
+  ]
+
+  static debounces = ["displayClearKeywordButton"]
 
   connect() {
+    useDebounce(this, { wait: 250 });
     useDispatch(this)
     this.updatePillsCounter()
     this.updateRadioButtonsClass()
@@ -28,6 +31,31 @@ export default class extends Controller {
     })
   }
 
+  // Keyword
+
+  displayClearKeywordButton() {
+    const classListAction = this.keywordInputTarget.value ? "remove" : "add";
+    this.clearKeywordButtonTarget.classList[classListAction]("hidden");
+  }
+
+  clearKeywordInput() {
+    const inputValue = this.keywordInputTarget.value;
+
+    if (!inputValue) return;
+
+    this.keywordInputTarget.value = "";
+    this.clearKeywordButtonTarget.classList.add("hidden");
+
+    if (this.keywordParamEqualsInputValue(inputValue)) {
+      this.submitForm();
+    }
+  }
+
+  keywordParamEqualsInputValue(inputValue) {
+    const url = new URL(window.location.href);
+    const keywordParam = url.searchParams.get("search[keyword]");
+    return keywordParam === inputValue;
+  }
 
   // Pills
   clearCheckedPills() {
@@ -80,13 +108,13 @@ export default class extends Controller {
 
   updateFiltersState() {
     this.updatePillsCounter()
-    if(this.advancedFiltersButton) {
+    if (this.advancedFiltersButton) {
       this.disableAdvancedFiltersButton(this.advancedFiltersButton)
     }
   }
 
   updateRadioButtonsClass() {
-    const buttons = document.querySelectorAll('input[name="search[distance]"]')    
+    const buttons = document.querySelectorAll('input[name="search[distance]"]')
     const buttons_array = [...buttons]
     buttons_array.forEach(button => {
       if (button.checked) {

diff --git a/app/javascript/stylesheets/application.scss b/app/javascript/stylesheets/application.scss
@@ -79,6 +79,10 @@
   }
 }
 
+svg.icon path {
+  fill: #3C4858;
+}
+
 button:disabled {
   color: #C2CEDB;
   cursor: default;

diff --git a/app/views/searches/show.html.slim b/app/views/searches/show.html.slim
@@ -79,7 +79,7 @@
                       | We couldn't find any nonprofits that matched your search.
                     p class="max-w-xs px-4 text-base text-center"
                       | Try searching for another keyword or editing your filters.
-                    button class="text-sm font-bold text-blue-medium" type="submit" data-action="click->search#clearCheckedPills click->search#clearAll"
+                    button class="text-sm font-bold text-blue-medium" type="submit" data-action="click->search#clearKeywordInput click->search#clearCheckedPills click->search#clearAll"
                       | Clear Filters
 
                     = link_to( \