Merge pull request #2640 from basecamp/mobile/search-scrolling+clear-suggestion

Mobile / Search scrolling + clear button suggestion

app/assets/stylesheets/native.css

@@ -104,10 +104,6 @@
       overscroll-behavior: auto;
     }
 
-    .search__input::-webkit-search-cancel-button {
-      display: inline-block;
-    }
-
     .search__title {
       text-decoration: none;
     }

app/assets/stylesheets/search.css

@@ -117,7 +117,7 @@ summary {
 
   .search-perma {
     .search__form > label,
-    .search__reset {
+    .search__form:has(.search__input:placeholder-shown) .search__reset {
       display: none;
     }
 

app/javascript/controllers/bar_controller.js

@@ -22,15 +22,6 @@ export default class extends Controller {
     this.#hideItem(this.searchTarget)
   }
 
-  clearInput() {
-    if (this.searchInputTarget.value) {
-      this.searchInputTarget.value = ""
-      this.searchInputTarget.focus()
-    } else {
-      this.reset()
-    }
-  }
-
   showModalAndSubmit(event) {
     this.showModal()
     this.formTarget.requestSubmit()

app/javascript/controllers/search_form_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["searchInput"]
+
+  clearInput() {
+    if (this.searchInputTarget.value) {
+      this.searchInputTarget.value = ""
+      this.searchInputTarget.focus()
+    } else {
+      this.dispatch("reset")
+    }
+  }
+}

app/views/searches/_form.html.erb

@@ -1,4 +1,10 @@
-<%= form_with url: search_path, method: :get, class: "search__form flex align-center justify-center gap-half", data: { bar_target: "form", turbo_frame: defined?(target_turbo_frame) ? target_turbo_frame : nil } do |form| %>
+<%= form_with url: search_path, method: :get,
+  class: "search__form flex align-center justify-center gap-half",
+  data: {
+    controller: "search-form",
+    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" %>
   <%= text_field_tag :q, query_terms,
         class: "search__input input",
@@ -7,9 +13,11 @@
         autocomplete: "off",
         autofocus: true,
         data: {
+          search_form_target: "searchInput",
           bar_target: "searchInput",
           action: "keydown.enter->bar#showModalAndSubmit:prevent keydown.esc->bar#reset" } %>
-  <button class="search__reset btn btn--circle borderless" data-action="bar#clearInput">
+  <button hidden>Search</button>
+  <button class="search__reset btn btn--circle borderless" data-action="search-form#clearInput">
     <%= icon_tag "close" %>
     <span class="for-screen-reader">Close search</span>
   </button>