EmberJS Octane устанавливает фокус на элементе

Question

У меня есть компонент, содержащий несколько текстовых областей и кнопку для добавления еще одной текстовой области. Когда пользователь нажимает кнопку, добавляется новая текстовая область. Я хочу, чтобы фокус переместился в эту новую текстовую область.

Я видел этот ответ, но он для более старой версии, и мы не используем jQuery с Ember.

Что у меня есть на данный момент:

Five-Whys.ts

type LocalWhy = {
  content: string;
};

export default class FiveWhys extends Component<FiveWhysArgs> {
  @tracked
  whys: LocalWhy[] = ...

  @action
  addWhy() {
    this.whys.pushObject({ content: "" });
  }
}

Five-Whys.hbs

{{#each this.whys as |why i|}}
  <TextQuestion @value={{why.content}} />
{{/each}}

<button {{on "click" (action this.addWhy)}}>Add Why</button>

text-question.hbs

...
<textarea value="{{ @value }}" />

Резюме вопроса

Как мне установить фокус на новое текстовое поле после того, как пользователь щелкнет "Добавить почему"?

Answer 1

Узнал, что могу использовать Ember.run.schedule для запуска кода после повторного рендеринга компонента.

@action
addWhy() {
    ... // Adding why field
    Ember.run.schedule('afterRender', () => {
      // When this function has called, the component has already been re-rendered
      let fiveWhyInput = document.querySelector(`#five-why-${index}`) as HTMLTextAreaElement
      if (fiveWhyInput)
        fiveWhyInput.focus();
    })
}

Answer 2

Я сделал что-то подобное в последнее время:

component.hbs:

{{#each this.choices as |item|}}
  {{input
    type="text"
    id=item.id
    keyPress=(action this.newElement item)
    value=(mut item.value)
  }}
{{/each}}

component.js

@action
newElement({ id }) {
  let someEmpty = this.choices.some(({ value }) => isBlank(value));

  if (!someEmpty)
    this.choices = [...this.choices, this.generateOption()];

  document.getElementById(id).focus();
}

generateOption(option) {
  this.inc ++;

  if (!option)
    option = this.store.createRecord('option');

  return {
    option,
    id: `${this.elementId}-${this.inc}`,
    value: option.description
  };
}

В моем случае у меня нет кнопок, и я создал записи данных ember. Бьюсь об заклад, с некоторыми изменениями вы сможете это сделать!