How can I properly focus a newly connected Stimulus controller after a Turbo form update?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

I have a page with two separate checklists for adding items. Turbo appends the form into a frame, and Stimulus is used to set focus on the input field when the controller connects.

When I submit the form by pressing return, even though the correct input is logged, the focus ends up on the first instance of the controller on the page rather than the newly added one. Submitting by clicking the button works correctly.

What can I do to ensure that the focus is set on the newly connected controller?

JAVASCRIPT
import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["name"]
  connect() {      
    console.log('Checklist controller connected'); 
    this.focusInput();     
  }

  focusInput() {    
    console.log(this.nameTarget)
    console.log('set focus')
    this.nameTarget.focus()
  }
}

The form is structured as follows:

ERB
<div  data-controller="checklist" >
  <%= simple_form_for trip.checklist_items.new , data: { checklist_target: "form" }   do |f| %>
    <%= f.input :checklist_type, as: 'hidden', input_html: { value: checklist_type }  %>          
    <%= f.input :trip_id, as: 'hidden', input_html: { value: trip.id }  %>    
    <div class="row">
      <div class="col-md-9">
        <%= f.input :name, label: false,  placeholder: 'E.G Ski Goggles', required: true,  input_html: { data: {  checklist_target: "name" } } %>   
      </div>
      <div class="col-md-3">    
        <%= button_tag(type: 'submit', class: 'btn btn-primary btn-full') do %>
          Add Item to Checklist <i class='bi bi-arrow-90deg-left icon-rotate-90'></i>
        <% end %>
      </div>
    </div>                                  
  <% end  %>
</div>

And the Turbo stream update is defined as:

ERB
<%= turbo_stream.append "checklist_items_frame_
#{@checklist_item.checklist_type}" do %>
  <%= render partial: "checklist_items/checklist_item" , locals: { checklist_item: @checklist_item, highlight: true }  %>
<% end %>

<%= turbo_stream.update "new_checklist_item_
#{@checklist_item.checklist_type}" do %>
  <%= render "form", trip: @checklist_item.trip, checklist_type: @checklist_item.checklist_type %>
<% end %>

Comments 0

•

Answers 3

•

3 Answers

Answer by StackOverflow TychoAI Agent • 1 month ago

Try delaying the focus call so that it runs after Turbo has finished updating the DOM. When you hit return, the new form is added, but the timing differs slightly compared to clicking the submit button. This can result in the focus method acting on the first instance instead of the newly inserted one.

A common fix is to wrap the focus call in a short delay using either setTimeout or requestAnimationFrame. For example:

JS
import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["name"];

  connect() {
    console.log("Checklist controller connected");
    // Delay focus to allow Turbo stream updates to finish
    setTimeout(() => this.focusInput(), 0);
  }

  focusInput() {
    console.log(this.nameTarget);
    console.log("set focus");
    this.nameTarget.focus();
  }
}

This ensures that by the time you call the focusInput method, the new form and its controller are fully connected and in the proper place in the DOM. This approach should work whether you submit by return or by clicking the button.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Answer by StarlitRover054 • 1 month ago

Can confirm that clicking a button sets focus correctly, but hitting Ender from the input focuses the first input. I don't know why it behaves differently, but there is a solution.

Rendering the same form multiple times produces duplicate id attributes on inputs. Removing these ids or making them unique fixes the issue.

This is a simplified setup:

ERB
# app/views/home/_form.html.erb

<div data-controller="checklist">
  <%= form_with url: "/" do |f| %>
    <%= f.hidden_field :type, value: type %>
    <%= f.text_field :name, data: {checklist_target: "name"} %>
    <%= f.submit %>
  <% end %>
</div>

ERB
# app/views/home/create.turbo_stream.erb

<%= turbo_stream.update "new_checklist_item_#{params[:type]}" do %>
  <%= render "form", type: params[:type] %>
<% end %>

<%= turbo_stream.after "new_checklist_item_#{params[:type]}" do %>
  <div><%= params[:name] %></div>
<% end %>

ERB
# app/views/home/index.html.erb

<div id="new_checklist_item_one">
  <%= render "form", type: "one" %>
</div>
<div id="new_checklist_item_two">
  <%= render "form", type: "two" %>
</div>
<div id="new_checklist_item_three">
  <%= render "form", type: "three" %>
</div>

JAVASCRIPT
// app/javascript/controllers/checklist_controller.js

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="checklist"
export default class extends Controller {
  static targets = ["name"]

  nameTargetConnected(target) {
    target.focus()
  }
}

The fix:

:namespace - A namespace for your form to ensure uniqueness of id attributes on form elements. The namespace attribute will be prefixed with underscore on the generated HTML id.

https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-form_with

ERB
<%= form_with url: "/", namespace: type do |f| %>

same for simple_form:

ERB
<%= simple_form_for trip.checklist_items.new, namespace: checklist_type do |f| %>

Alternatively, you can remove the id from the input:

ERB
<%= f.text_field :name, id: nil, data: {checklist_target: "name"} %>

for simple_form:

ERB
<%= f.input :name, 
  input_html: { 
    id: nil,
    data: {checklist_target: "name"}
  } 
%>

No comments yet.

Answer by EtherealScout485 • 1 month ago

Alex's answer is better, but as a workaround this worked too. Set the focus immediately.

JAVASCRIPT
connect() {          
    this.nameTarget.focus()     
    this.checkFocusTime(1)  
   
   ...
   
  }

 checkFocusTime(time){
    setTimeout(() => {      
      this.focusInputUnlessActive()
    }, time);
  }

No comments yet.

Discussion

No comments yet.

How can I properly focus a newly connected Stimulus controller after a Turbo form update?

3 Answers

Discussion

Similar Posts

How can I pass chart click event data from a Stimulus controller to a Rails ActionController for CSV exports?

Tailwind CSS 404 Error on Rails 8 App Despite Following Official Installation Instructions