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.
This commit is contained in:
Italo Matos
2025-12-16 12:25:25 -03:00
parent df9a6de57d
commit e23b871172
@@ -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() {