Maintain input focus on Turbo Load?

Question

I have content and a search form wrapped in a turbo frame. As the user types in the search field the content updates live. The issue is the search field loses focus each time.

Any way to maintain focus? It also should be only while typing and not interacting with the other form inputs.

I could move the search field outside the turbo frame but that is not that desirable given my preferred div layout.

Did you try using the `autofocus` attribute? See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) — aidan, May 22 '22 at 05:53

score 0 · Answer 1 · answered Aug 16 '22 at 21:48

It is a bit late, but I just figured it out for a project of my own. There are a few points to keep an eye. More specifically:

Most importantly, the form's method should be POST (added as a parameter in form_with / form_tag / form_for)
```
<%= form_with url: content_search_path,
              method: :post do |form| %>
```
Add in the definition of the search field.

Add the automatic submission of the form for every user input (in the search box's definition again)

  <%= form.search_field :content_search,
                        oninput: "this.form.requestSubmit()",
                        placeholder: "Type here",
                        ....
                        autofocus: true %>

Hope it helps!

Maintain input focus on Turbo Load?

1 Answers1