I’m trying to create an instant search and faced the following issues: When submitting as GET, my input box loses focus and have to click on the input again with every press of the key, any built-in method for the input box to retain focus? When submitting as POST, the URL does not reflected the s…

[image] hotphp: When submitting as GET, my input box loses focus and have to click on the input again with every press of the key, any built-in method for the input box to retain focus? Are you saying when you use GET you loose focus, but when you use POST you don’t loose focus?

Are you saying when you use GET you loose focus, but when you use POST you don’t loose focus? Yes, exactly. btw I found your post about this on another conversation. Working through it to find a solution Writing better StimulusJS controllers | Boring Rails: Skip the bullshit and ship fast

Can you share some of the HTML you are using and how you are performing the instant search with each keystroke?

// form that is not in a turbo frame <form action="/prototype" method="POST" data-turbo-frame="listings see_more_listings" data-turbo-action="advance" data-controller="instant-submit"> <input placeholder="" autocomplete="off" type="search" value="" data-action="input->instant-sub…

The code includes two turbo-frames listings see_more_listings, but I believe you can only target one at a time.

Do you mean that is the cause of the loss of focus?

Correct. When turbo evaluates the tag, it looks at the value of data-turbo-frame. If it’s an invalid value, then it will send the request as a standard turbo-drive request instead of a turbo-frame request. If you look at your browsers dev tools network you will likely see a fetch request, but if …

Thanks! I now have only 1 frame and no more losing focus! How does the HTML response of a nested turbo-stream look like?

[image] Is this correct?. A Stimulus controller to use turbo_stream GET requests to avoid updating browser history Links Another way to put this is, turbo-frames CAN only update a single page of the page. turbo-streams CAN be used to update more than one part of the page.…

Instant search issues

tleish June 9, 2022, 5:52pm 11

1 Like

Topic		Replies	Views
Search-as-you-type with Turbo?	15	5703	March 12, 2022
Triggering Turbo Frame with JS	52	41919	August 26, 2024
Reloading form through turbo stream and `focus()`-ing an element	3	894	April 29, 2023
Data-turbo-permanent is recreated on updating form with turbo-stream	7	286	February 9, 2025
Stimulus request has format JS when it should be HTML	14	1433	January 26, 2023

Instant search issues

Related topics