Focus is lost after reordering items

[abdel-17]

Describe the bug

I have a recursive tree data structure, which is flattened to a list. Sometimes, when the items in the tree are reordered, the focused item loses focus. I suspect the DOM element is recreated, causing focus to be lost.

Reproduction

https://svelte.dev/playground/2556d9ee465d4ebfa431b03430ee6b45?version=5.25.3

• Click on item 1.

• 1 and 2 should swap order, but focus will be lost.

• Click on 2.

• It should swap without losing focus.

Logs

System Info

System:
    OS: macOS 15.3.2
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 21.63 MB / 16.00 GB
    Shell: 3.7.1 - /usr/local/bin/fish
  Binaries:
    Node: 23.7.0 - /usr/local/bin/node
    npm: 10.9.2 - /usr/local/bin/npm
    pnpm: 10.4.1 - /usr/local/bin/pnpm
    bun: 1.2.2 - /usr/local/bin/bun
  Browsers:
    Brave Browser: 134.1.76.74
    Safari: 18.3.1

Severity

annoyance

[brunnerh]

It should not be recreated, but inserting an element at a different position will remove the element first, causing issues like this.

This is probably one of those things that could be fixed via moveBefore() which is currently not supported in non-Chromium browsers.

Rich did not like the idea of using a progressive enhancement since it would lead to inconsistencies (see this comment). For things like focus, the state could maybe be stored before the #each updates and then be restored afterwards.

Edit: This is a duplicate of:

• Keyed each does not preserve element (re-create) when reordered #3973

Here one suggestion for a fix was to check which element is active and prevent that element from being re-inserted, i.e. move all the other elements as necessary to achieve the correct order.