There is a problem with keyed each.

[daybrush]

Describe the bug

There is a problem with keyed each.
When the position of the array is changed, the position of the element is strange.

To Reproduce
To help us help you, if you've found a bug please consider the following:

https://svelte.dev/repl/9d71f9bdfec1443bb7d65064000861db?version=3.38.3

Expected behavior
A clear and concise description of what you expected to happen.

When click button, change [1, 2, 3] to [2, 3 ,4, 1]

Severity
How severe an issue is this bug to you? Is this annoying, blocking some users, blocking an upgrade or blocking your usage of Svelte entirely?

If the position of the item changes but the element does not change, the problem is big.

[AlexxNB]

Looks ok for me. When I use a key by value, I expect that the order of values in each will not change, when array reordered. But only new elements should be in the end of the list.

UPD: think about it more, and yeah list should be in order of current element positions in array.

[nolanlawson]

I believe I've run into this same issue. FWIW based on the REPL (and my own tests), it looks like it was introduced in 3.38.0:

• 3.37.0 ✔️
• 3.38.0 ❌

[Leonidaz]

incidentally, using the array index position as the key still works:

https://svelte.dev/repl/a3f0f86ca2014efeb3db9ea3fbd5c21b?version=3.38.3

[daybrush]

@Leonidaz

If the key is an index, the element has not actually changed, only the content has changed.
If the key is unique and not an index, the element has to actually move.

[DhyeyMoliya]

I have slightly modified the original REPL here : https://svelte.dev/repl/78dfb2a56074467f8acc0fec7a6f70c0?version=3.38.3
It demonstrates simply the reversing or an array is not rendered properly.

This is a very serious issue.

For example, I am showing a sorted table to user, and my sorted items are scrambled up like this.

[Conduitry]

This should be fixed in 3.39.0 - https://svelte.dev/repl/9d71f9bdfec1443bb7d65064000861db?version=3.39.0

[davy-blavette]

Maybe the same problem, I have the version 3.48 :

      {#each Object.entries(data.apprenant.dim2) as [type, score], i} <<< bug value of i
            <div class="column is-full">
                <div class="card is-shady">
                    <div class="card-content">
                        <div class="" >
                            <Accordion isOpen="{data.apprenant.profil.toLowerCase().includes(type)}">
                                <div class="slot" slot="head">
                                    <h4>{type.toUpperCase()}</h4>
                                    **<i class="fa-solid {composants[i].icon}"></i>**<<<  i == 0, good
                                </div>
                                <div slot="details">
                                    <div class="columns">
                                        <div class="column is-three-quarters">
                                            **<svelte:component this={composants[i].full}**<<<  i == +3, bad
                                                              activist={data.apprenant.dim1.activist.score}
                                                              reflector={data.apprenant.dim1.reflector.score}
                                                              theorist={data.apprenant.dim1.theorist.score}
                                                              pragmatist={data.apprenant.dim1.pragmatist.score}
                                            />
                                        </div>
                                        <div class="column">
                                            <svelte:component this={composants[i].simple} score={score}/> <<<  i == +1, bad
                                        </div>
                                    </div>
                                </div>
                            </Accordion>
                        </div>
                    </div>
                </div>
            </div>
        {/each}