Fix: Maintain search input focus after form submission #2163
+7
−0
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
Member
jorgemanrubia
left a comment
jorgemanrubia
left a comment
There was a problem hiding this comment.
Minor comment but 👍 to this one @italomatos thanks
| this.showModal() | ||
| this.formTarget.requestSubmit() | ||
|
|
||
| // Restore focus to search input after turbo frame loads |
Member
There was a problem hiding this comment.
Could consider extracting a method #restoreFocusAfterTurboFrameLoads() to remove the comment and keep the showModalAndsubmit sentences working at the same level of abstraction.
Contributor
Author
There was a problem hiding this comment.
Thank you so much, @jorgemanrubia ! That makes a lot of sense. Thanks a lot for the review.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
Video: git push --set-upstream origin fix/maintain-search-input-focus-on-submit
https://jam.dev/c/982fcbfc-87a6-4bab-9c1a-a0628d54ed98
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.