如何在ember-power-select-multiple渲染后自动聚焦输入框？

我之前也踩过Ember Power Select多选组件的这个聚焦坑，原生focus()/click()直接调用确实经常没效果——毕竟组件内部有自己的状态管理逻辑，单纯的DOM操作没法同步组件的内部状态。给你几个靠谱的解决思路：

1. 调用组件原生API（推荐方案） #

Ember Power Select本身提供了focusInput()方法，你只需要拿到组件实例就能调用，这是最稳定的方式：

控制台测试时的写法 #

// 先获取组件的根元素，再取内部的ember实例
const selectRoot = document.querySelector('.ember-power-select-multiple');
if (selectRoot?.emberInstance) {
  selectRoot.emberInstance.focusInput();
}

在你的Ember组件中使用 #

import Component from '@glimmer/component';

export default class YourWrapperComponent extends Component {
  didInsertElement() {
    super.didInsertElement();
    // 等待组件渲染完成后调用
    const selectRoot = this.element.querySelector('.ember-power-select-multiple');
    if (selectRoot?.emberInstance) {
      selectRoot.emberInstance.focusInput();
    }
  }
}

2. 结合延迟与DOM事件触发（备用方案） #

如果因为某些场景没法拿到组件实例，可以试试用setTimeout延迟触发，同时手动派发聚焦事件同步组件状态：

setTimeout(() => {
  const input = document.querySelector('.ember-power-select-trigger-multiple-input');
  if (input) {
    input.focus();
    // 派发冒泡的focus事件，确保组件感知到状态变化
    input.dispatchEvent(new Event('focus', { bubbles: true, cancelable: true }));
  }
}, 100);

⚠️ 注意：这个方案依赖组件的DOM结构，后续组件版本更新可能失效，优先推荐第一种方法。

3. 利用组件初始化钩子（最优雅的集成方式） #

如果你是自己在项目中使用这个组件，可以直接通过on-init钩子在组件初始化时触发聚焦：

模板代码 #

{{#power-select-multiple
  options=availableOptions
  selected=selectedItems
  on-init=(action this.handleSelectInit)
as |option|}}
  {{option.label}}
{{/power-select-multiple}}

组件类代码 #

import Component from '@glimmer/component';

export default class YourComponent extends Component {
  handleSelectInit(selectInstance) {
    // 组件初始化完成后直接调用聚焦方法
    selectInstance.focusInput();
  }
}

为什么原生方法不生效？ #

Ember Power Select的多选组件会通过内部状态（比如isFocused）控制输入框的可用性，直接调用DOM的focus()只会修改DOM状态，不会同步组件的内部状态，组件可能会在后续的渲染周期中覆盖你的操作，导致看起来没反应。

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