focus is not maintained in 'x-for' loop when using 'key' attribute

[danielFHcode]

When using an 'x-for' loop without a 'key' attribute, the focus in a list is retained but not in the correct location:

<ul x-data="{ items: ['a', 'b', 'c', 'd', 'e'] }">
  <template x-for="(item,index) in items">
    <li
      x-text="item"
      tabindex="0"
      @keydown.down="
            if (index < items.length-1) {
                [items[index], items[index+1]]
                    = [items[index+1], items[index]]
              }
          "
    ></li>
  </template>
</ul>

Screen.Recording.2026-03-16.000820.mp4

This is expected behavior and should be solvable by adding the 'key' attribute. However if you add the key attribute, every update to the list causes loss of focus, and when you press tab the placement of the focus is wrong:

<ul x-data="{ items: ['a', 'b', 'c', 'd', 'e'] }">
  <template x-for="(item,index) in items" :key="item">
    <li
      x-text="item"
      tabindex="0"
      @keydown.down="
            if (index < items.length-1) {
                [items[index], items[index+1]]
                    = [items[index+1], items[index]]
              }
          "
    ></li>
  </template>
</ul>

Screen.Recording.2026-03-16.000659.mp4

This is problematic for accessibility reasons.

[ekwoka]

This is intended, because the key when you don't provide it is just the index, so you reordering things, it just changes everything to match, not actually moving elements..

Currently, with the logic, it uses apis that basically cause the element to be removed and readded when reordered (the relevant moved ones).

There are newer apis that should help retain that behavior but their support isn't fantastic (well, it's good enough for most, but is a newer api). I might make a PR since I was interesting in that approach, but I don't know for sure if it would solve it anyway.

Should even be possible to have it gracefully fall back on older browsers, but then you'd still have this issue there...

You could keep track of the focus in your space and ensure it's maintained, but that could also be pretty tricky.

[danielFHcode]

In the example I showed I managed to solve the problem by adding $nextTick(() => $el.focus()) which works because I used x-key in the for loop. In a more complex case, for example if you had multiple lists, this solution wouldn't work anymore because alpine does not support sharing x-keys between different loops.