From e23b8711723898c829b4f72367835affa9b74aae Mon Sep 17 00:00:00 2001 From: Italo Matos Date: Tue, 16 Dec 2025 12:25:25 -0300 Subject: [PATCH 1/2] Fix: Maintain search input focus after form submission Problem: When pressing Enter in the search input field, focus was lost after the form was submitted and the Turbo Frame updated with search results. This forced users to click back into the field to continue interacting with the search. Solution: Added a turbo:frame-load event listener in the bar controller's showModalAndSubmit method that automatically restores focus to the search input after the Turbo Frame finishes loading the results. The listener uses {once: true} to auto-cleanup after execution. --- app/javascript/controllers/bar_controller.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/javascript/controllers/bar_controller.js b/app/javascript/controllers/bar_controller.js index 5e72e4e078..522e3eee3f 100644 --- a/app/javascript/controllers/bar_controller.js +++ b/app/javascript/controllers/bar_controller.js @@ -34,6 +34,11 @@ export default class extends Controller { showModalAndSubmit(event) { this.showModal() this.formTarget.requestSubmit() + + // Restore focus to search input after turbo frame loads + this.turboFrameTarget.addEventListener("turbo:frame-load", () => { + this.searchInputTarget.focus() + }, { once: true }) } showModal() { From d66e2f0b8ac9991bc45c96ecbcaf35614423cb7e Mon Sep 17 00:00:00 2001 From: Italo Matos Date: Fri, 19 Dec 2025 12:33:00 -0300 Subject: [PATCH 2/2] remove comment and move logic to method --- app/javascript/controllers/bar_controller.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/app/javascript/controllers/bar_controller.js b/app/javascript/controllers/bar_controller.js index 522e3eee3f..e83bce9a9a 100644 --- a/app/javascript/controllers/bar_controller.js +++ b/app/javascript/controllers/bar_controller.js @@ -34,11 +34,7 @@ export default class extends Controller { showModalAndSubmit(event) { this.showModal() this.formTarget.requestSubmit() - - // Restore focus to search input after turbo frame loads - this.turboFrameTarget.addEventListener("turbo:frame-load", () => { - this.searchInputTarget.focus() - }, { once: true }) + this.#restoreFocusAfterTurboFrameLoads() } showModal() { @@ -56,6 +52,12 @@ export default class extends Controller { } } + #restoreFocusAfterTurboFrameLoads() { + this.turboFrameTarget.addEventListener("turbo:frame-load", () => { + this.searchInputTarget.focus() + }, { once: true }) + } + #loadTurboFrame() { this.turboFrameTarget.src = this.searchUrlValue }