From cac08c8f064dfa0af705e6e2570f182d855c6d01 Mon Sep 17 00:00:00 2001 From: Jay Ohms Date: Sat, 28 Feb 2026 04:39:36 -0500 Subject: [PATCH 1/5] Disable search results nested scrolling behavior for mobile apps --- app/assets/stylesheets/native.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/assets/stylesheets/native.css b/app/assets/stylesheets/native.css index 521ca00ff..863f57596 100644 --- a/app/assets/stylesheets/native.css +++ b/app/assets/stylesheets/native.css @@ -96,6 +96,10 @@ /* Search /* ------------------------------------------------------------------------ */ + .search { + overscroll-behavior: auto; + } + .search__title { text-decoration: none; } From 8a1a18562cd11636e46a6f903c79036fb85a9725 Mon Sep 17 00:00:00 2001 From: Jay Ohms Date: Sat, 28 Feb 2026 05:10:30 -0500 Subject: [PATCH 2/5] Display the native search input clear button in the native apps --- app/assets/stylesheets/native.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/assets/stylesheets/native.css b/app/assets/stylesheets/native.css index 863f57596..9aac8c169 100644 --- a/app/assets/stylesheets/native.css +++ b/app/assets/stylesheets/native.css @@ -100,6 +100,10 @@ overscroll-behavior: auto; } + .search__input::-webkit-search-cancel-button { + display: inline-block; + } + .search__title { text-decoration: none; } From 340d9aa763d3f78fe859b5ff7ca42de93467e3d8 Mon Sep 17 00:00:00 2001 From: Adrien Maston Date: Mon, 2 Mar 2026 14:21:32 +0100 Subject: [PATCH 3/5] Delegate clearing the input to new controller --- app/javascript/controllers/bar_controller.js | 7 ++----- .../controllers/search_form_controller.js | 17 +++++++++++++++++ app/views/searches/_form.html.erb | 12 ++++++++++-- 3 files changed, 29 insertions(+), 7 deletions(-) create mode 100644 app/javascript/controllers/search_form_controller.js diff --git a/app/javascript/controllers/bar_controller.js b/app/javascript/controllers/bar_controller.js index e83bce9a9..d3a861023 100644 --- a/app/javascript/controllers/bar_controller.js +++ b/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() } } diff --git a/app/javascript/controllers/search_form_controller.js b/app/javascript/controllers/search_form_controller.js new file mode 100644 index 000000000..c4efceedc --- /dev/null +++ b/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 + } +} diff --git a/app/views/searches/_form.html.erb b/app/views/searches/_form.html.erb index 0ea00678f..e3e4e3ba5 100644 --- a/app/views/searches/_form.html.erb +++ b/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:clear->bar#clearInput", + 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" } %> - + From 6a4db9af4df0442cab38a9f56a19566706936963 Mon Sep 17 00:00:00 2001 From: Adrien Maston Date: Mon, 2 Mar 2026 14:22:28 +0100 Subject: [PATCH 4/5] Show the custom clear button ... instead of the browser's --- app/assets/stylesheets/native.css | 4 ---- app/assets/stylesheets/search.css | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/app/assets/stylesheets/native.css b/app/assets/stylesheets/native.css index 9aac8c169..863f57596 100644 --- a/app/assets/stylesheets/native.css +++ b/app/assets/stylesheets/native.css @@ -100,10 +100,6 @@ overscroll-behavior: auto; } - .search__input::-webkit-search-cancel-button { - display: inline-block; - } - .search__title { text-decoration: none; } diff --git a/app/assets/stylesheets/search.css b/app/assets/stylesheets/search.css index 5691ac5e5..724d00f1a 100644 --- a/app/assets/stylesheets/search.css +++ b/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; } From 8fced550d84bb6e2b72b061c6dd1e987801c7102 Mon Sep 17 00:00:00 2001 From: Adrien Maston Date: Tue, 3 Mar 2026 10:31:08 +0100 Subject: [PATCH 5/5] Refactor --- app/javascript/controllers/bar_controller.js | 6 ------ app/javascript/controllers/search_form_controller.js | 9 +++------ app/views/searches/_form.html.erb | 2 +- 3 files changed, 4 insertions(+), 13 deletions(-) diff --git a/app/javascript/controllers/bar_controller.js b/app/javascript/controllers/bar_controller.js index d3a861023..70f63990f 100644 --- a/app/javascript/controllers/bar_controller.js +++ b/app/javascript/controllers/bar_controller.js @@ -22,12 +22,6 @@ export default class extends Controller { this.#hideItem(this.searchTarget) } - clearInput(event) { - if (event.detail.isAlreadyEmpty) { - this.reset() - } - } - showModalAndSubmit(event) { this.showModal() this.formTarget.requestSubmit() diff --git a/app/javascript/controllers/search_form_controller.js b/app/javascript/controllers/search_form_controller.js index c4efceedc..d48741cd5 100644 --- a/app/javascript/controllers/search_form_controller.js +++ b/app/javascript/controllers/search_form_controller.js @@ -4,14 +4,11 @@ export default class extends Controller { static targets = ["searchInput"] clearInput() { - this.dispatch("clear", { detail: { isAlreadyEmpty: this.isEmpty } }) - if (!this.isEmpty) { + if (this.searchInputTarget.value) { this.searchInputTarget.value = "" this.searchInputTarget.focus() + } else { + this.dispatch("reset") } } - - get isEmpty() { - return !this.searchInputTarget.value - } } diff --git a/app/views/searches/_form.html.erb b/app/views/searches/_form.html.erb index e3e4e3ba5..88bcafee0 100644 --- a/app/views/searches/_form.html.erb +++ b/app/views/searches/_form.html.erb @@ -2,7 +2,7 @@ class: "search__form flex align-center justify-center gap-half", data: { controller: "search-form", - action: "search-form:clear->bar#clearInput", + 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" %>