Stimulus无法为新连接控制器设置焦点的问题求助

我实现了一个简单的checklist新增功能，页面上存在两个不同的checklist。通过Turbo将表单添加到frame后，尝试用Stimulus设置输入框焦点。遇到的问题是：按回车键提交表单时，尽管日志显示已找到正确的输入目标，但焦点却被设置到页面上第一个控制器实例的输入框，而非刚连接的那个；点击提交按钮提交则完全正常。请问该如何解决？

相关代码 #

Stimulus控制器代码 #

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()
  }
}

表单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>

Turbo Stream 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 %>

解决方案 #

这个问题的核心是回车键提交时，浏览器会触发默认行为，优先聚焦页面中第一个可交互元素，再加上Turbo更新DOM后Stimulus的连接时机和浏览器焦点机制存在冲突，才导致焦点跑偏。下面提供几种可行的解决方法：

方法1：给焦点设置加微小延迟 #

修改Stimulus控制器的focusInput方法，用setTimeout延迟10ms执行聚焦操作，让浏览器先处理完默认的回车键提交行为，再设置目标输入框的焦点：

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')
    // 延迟10ms，避开浏览器默认焦点处理的时机
    setTimeout(() => {
      this.nameTarget.focus()
    }, 10);
  }
}

方法2：手动接管回车键提交逻辑 #

在Stimulus控制器中监听输入框的回车键事件，阻止浏览器的默认提交行为，手动提交表单后再确保焦点落在当前输入框：

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

export default class extends Controller {
  static targets = ["name", "form"]
  connect() {      
    console.log('Checklist controller connected'); 
    this.focusInput();
    // 给当前输入框绑定回车键监听
    this.nameTarget.addEventListener('keydown', this.handleEnterKey.bind(this));
  }

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

  handleEnterKey(event) {
    if (event.key === 'Enter') {
      event.preventDefault(); // 阻止浏览器默认的回车键提交行为
      this.formTarget.submit(); // 手动提交表单
      // 提交后Turbo会更新DOM，新控制器连接时会自动执行focusInput
    }
  }

  disconnect() {
    // 清理事件监听，避免内存泄漏
    this.nameTarget.removeEventListener('keydown', this.handleEnterKey.bind(this));
  }
}

注意：需要确保表单元素上已经添加了data-checklist-target="form"，对应控制器里的formTarget。

方法3：给输入框添加autofocus和关闭自动补全 #

在表单的name输入框中添加autofocus属性，强制浏览器聚焦当前输入框，同时加上autocomplete="off"避免自动补全干扰焦点设置：
修改表单中的输入框代码：

<%= f.input :name, label: false,  placeholder: 'E.G Ski Goggles', required: true,  
  input_html: { 
    data: { checklist_target: "name" },
    autofocus: true,
    autocomplete: "off"
  } %>

这种方法可以和Stimulus的focusInput方法配合使用，双重保障焦点能正确落在目标输入框上。

内容的提问来源于stack exchange，提问作者Will