Как работать с обновлением в инпуте при сортировке элементов?

Question

[Boris009]

Есть список элементов
В каждом элементе есть инпут, где мы вводим число, которое является рейтингом
Список сортируется по этим значениям рейтинга
Когда мы вводим новое значение меняя с 5 на 50, то текущий элемент и текущий инпут для ввода реко становится следующим, который будел со значением 6, а наш текущий с 50, становится последним
Каким образом работать с заполнением таких инпутов?
А точнее, как перемещаться за этим элементом по странице при вводе нового значения?
Как вообще называется этот эффект и как с ним борятся в библиотеках реакта, вью и т.п.?

Comments

[Вадим]

Проблема не понятна. Ввели 50, инпут улетел в конец списка. Всё отработало как ожидалось, что не так?
Нужно чтобы после сортировки элемент продолжал быть виден на странице и не нужно было до него скролить, не смотря на то, что он теперь внизу?

[Boris009]

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

Answer 1

[0xD34F]

Не обновляйте данные, пока фокус не будет потерян. Типа, v-model.lazy.

Или можете слушать событие input и дёргать метод focus у поля ввода, это заставит (ну, такое должно быть поведение по умолчанию) браузер выполнить прокрутку к элементу (если вдруг недостаточно, можно перед фокусом ещё и scrollIntoView вызвать). Типа так.

Comments

[Boris009]

Да, у меня ситуация один в один, как вы в примере показали
И без

const onInput = e => setTimeout(() => e.target.focus())

так же улетает в новое место, только по прежнему активный фокус был бы на элементе, который встал на его место

Это сработает в любой библиотеке же?
Есть небольшое подозрение, что e.target покажет на элемент, который встал на его место, а не оставил ссылку на старый

const onInput = e => setTimeout(() => e.target.focus())

Спасибо за пример, вечером протестирую и отпишусь