Автофокус не работает после обновления формы с помощью ajax

Question

В Rails 5.2 я создал форму (мою первую) с помощником form_with. По умолчанию это remote: true.

Эта форма содержит один ввод с autofocus="autofocus".

После ошибки проверки та же форма возвращается с ajax. Я использую это для обновления формы:

document.addEventListener('ajax:success', (event) => {
  const [data, status, xhr] = event.detail;
  const form = document.getElementById('form-signin')
  form.parentNode.innerHTML = xhr.responseText
})

Это работает, но автофокус сейчас не работает. (это происходит в первый раз)

Есть ли способ заставить автофокус работать автоматически или я должен сделать это вручную в коде js выше?

Все работает с local:true, но так как это больше не значение по умолчанию, я хотел бы попробовать новый способ. Существует не так много документации о том, как правильно обрабатывать ответ Ajax. (Сначала я думал, что турболинки сделают это для меня)

Решение: Ответ ниже работает, но я нашел лучшее решение, которое делает его намного проще. Работает без написания собственного javascript: https://github.com/turbolinks/turbolinks-rails/issues/40 https://github.com/jorgemanrubia/turbolinks_render

Answer 1

Автофокус срабатывает при загрузке страницы, следовательно, если ваша страница уже загружена, вы не получите ожидаемый результат.

Вы можете вручную сфокусировать первый элемент автофокусировки, когда вызов ajax завершится из вашего обратного вызова, примерно так:

const autofocusedElements = document.querySelectorAll('input[autofocus]');
if (autofocusedElements.length) {
  autofocusedElements[0].focus();
}