How to transfer focus to the next Input in a dynamic table by Enter?

Question

Vue.js

Good time.
Dynamically created rows in a table with Input. The user enters some value in the Input and @keyup.enter needs to transfer focus to the next Input.

Table

example Tell me how to find the next Input by css class (for example .find-me-vue) and give it focus?

As an option, through $refs, sequentially specifying the ref of the next input, but this is a hard binding and if one line is deleted, the chain will be broken.

Thanks in advance

Answer 1

I would do something like this

this // текущий input
  .closest('tr')
  .nextElementSibling
  .querySelector('input.find-me-vue')
  .focus()

However, there are still some exceptions to be made.

Answer 2

If you need a universal solution, then the correct one will follow the same logic as tab.
For example, use a tabbable (or any other similar lib) on the root form, and based on the position of the element, focus the next one.
Because visually, the elements do not necessarily follow in the same order as in dom, and it is also not necessary that the next in focus should be exactly the next one in order. For all this, it was invented tabindex.