Added input field to search speakers. #674
Conversation
15612c2 to
46460f3
Compare
46460f3 to
1a91d0a
Compare
There was a problem hiding this comment.
Thanks for exploring this
I would like to have a more Turbo way of doing this where I think we could achieve a smoother behaviour like the one we have in the spotlight search
But before getting to deep in the technical stuff from a UX point of view I wonder if we should do a full page refresh with the results or get a typeahead results first and full results when pressing enter
Here is an example of the amazon UX
CleanShot.2025-04-18.at.09.18.14.mp4
| connect () { | ||
| this.timeout = null | ||
|
|
||
| if (this.hasInputTarget) { | ||
| this.inputTarget.focus() | ||
| this.inputTarget.selectionStart = this.inputTarget.selectionEnd = this.inputTarget.value.length | ||
| } | ||
| } | ||
|
|
||
| search () { | ||
| clearTimeout(this.timeout) | ||
|
|
||
| this.timeout = setTimeout(() => { | ||
| this.element.requestSubmit() | ||
| }, 800) | ||
| } | ||
| } |
There was a problem hiding this comment.
I understand that you want to maintain the focus in the field every time the page is updated with the search results and as you are doing a full page refresh you need this to maintain the focus.
I think with Turbo we could probably achieve the same thing in a more standard way. Either with setting the search field as permanent and doing a page morph or using turbo frame. They must be a way to do this without having to manually handle the focus
Also fo rthe timeout what you are trying to do manually is a debounce. You can use a similar debounce technic as in the spotlight stimulus controller
There was a problem hiding this comment.
@adrienpoly Can you explain to me better what you want to do? I really didn't understand.
There was a problem hiding this comment.
@adrienpoly can you help me?
d35f39a to
ec30df0
Compare
Added input field to search speakers.
This issue: #670
This result: