AlpineJS - автоматический выбор не работает, когда есть более одного дела

Question

Я делаю небольшое приложение ToDo в AlpineJS, и я бегу в проблему autoselecting поле, когда пользователь нажимает на TODO. Эта проблема возникает только при наличии нескольких задач.

Когда пользователь вводит первую задачу в приложение, он может щелкнуть задачу, чтобы отредактировать ее. Поле будет выбрано автоматически, как и ожидалось. Однако, когда пользователь добавляет в приложение более одной задачи и хочет отредактировать n+1 задачу, поле больше не будет автоматически выбирать, но первая задача по-прежнему автоматически выбирается.

Вот мой CodePen для справки.

Вот как выглядит моя функция редактирования:

JS

[...]
edit(todo) {
    todo.editing = !todo.editing
    this.$nextTick(() => {
      document.getElementById(`edit-${todo.id}`).select()
    })
  }
[...]

HTML

[...]
<div
  x-text="todo.item"
  class="todo-item"
  @click="edit(todo)" // <-- point of interest
  x-show="!todo.editing"
  :class="{ 'completed' : todo.completed }"
  >
</div>

<input
  type="text"
  x-show="todo.editing"
  :value="todo.item"
  x-model="todo.item"
  @keydown.enter="edit(todo)"
  @keydown.escape="todo.editing = false"
  @click.away="todo.editing = false"
  class="edit-input"
  :id="`edit-${todo.id}`" // <-- point of interest
/>
[...]

Кто-нибудь знает, что может быть не так с моей логикой? Спасибо вам за помощь!

Answer 1

Кажется, используя setTimeout(() => { ... }, 1)(тайм-аут 1 мс) работает, см. следующий код, измененный по сравнению с вашим.

В Alpine.js есть известные проблемы в области $nextTick.

Я бы также рекомендовал использовать x-ref вместо того ids, поэтому ваш ввод будет выглядеть следующим образом:

<input
  type="text"
  x-show="todo.editing"
  :value="todo.item"
  x-model="todo.item"
  @keydown.enter="edit(todo)"
  @keydown.escape="todo.editing = false"
  @click.away="todo.editing = false"
  class="edit-input"
  :x-ref="`edit-${todo.id}`"
/>

Затем вы можете установить edit(todo) быть:

  edit(todo) {
    todo.editing = !todo.editing
    setTimeout(() => {
      this.$refs[`edit-${todo.id}`].select()
    }, 1)
  }