Exceptions thrown after a couple of (random) sorts #661
Description
I have a very basic example of sorting, yet i have the strange behaviour that after a couple of random sortings, i first get back some placeholders as id's from the onconsider callback, and then afterwards i receive duplicate ids in the onconsider callback, leading to svelte complaining about duplicate id's which then removes the items completely from the dom.
My setup looks like the following:
let items = $state([
{ id: "foo1", url: "foo1.png" },
{ id: "foo2", url: "foo2.png" },
{ id: "foo3", url: "foo3.png" },
{ id: "foo4", url: "foo4.png" },
{ id: "foo5", url: "foo5.png" },
]);
async function handleFinalize(e: any)
{
items = e.detail.items;
}
async function handleSort(e: any)
{
items = e.detail.items;
console.log(items);
}
<div
class="grid [grid-template-columns:repeat(auto-fill,150px)] gap-4 my-4 justify-center"
use:dndzone={{
items,
flipDurationMs: 300,
dropTargetStyle: {outline: 'rgba(var(--colors-color5-rgb)) solid 2px'},
}}
onconsider={handleFilter}
onfinalize={handleFinalize}>
{#each items as image(image.id)}
<div style="background-image: url({image.url}); width: 150px; height: 200px;"></div>
{/each}
</div>
After 20-30 sorts (letting the 300 ms pass seems to be importation to toggle the flip animation), i start receiving some placeholder id's in my callbacks, which then leads to duplicate key in the next run - e.g. see index 1 here:
On the next sort, i get duplicate keys:
which leads to svelte crashing:
