isaacHagoel / svelte-dnd-action

An action based drag and drop container for Svelte
MIT License
1.67k stars 100 forks source link

overrideItemIdKeyNameBeforeInitialisingDndZones not working as expected in Svelte v5 #571

Open EricSSartorius opened 3 weeks ago

EricSSartorius commented 3 weeks ago

In V4, importing and calling overrideItemIdKeyNameBeforeInitialisingDndZones at the top of the component using DND worked as expected. In Svelte v5 (RC) this no longer works. I get an error saying Uncaught Error: can only override the id key before initialising any dndzone. The UI renders but after trying to drag an item everything breaks.

isaacHagoel commented 2 weeks ago

Hi @EricSSartorius, I tried to reproduce this today but it seems to work fine for me. I tried this using svelte 5.0.0-next.136 (tried v4 as well):

<script>
    import {dndzone, overrideItemIdKeyNameBeforeInitialisingDndZones} from "svelte-dnd-action";
    overrideItemIdKeyNameBeforeInitialisingDndZones("_id");
    function handleSort(e) {
        items = e.detail.items;
    }
    let items = [
        {_id:1, title: 'I'},
        {_id:2, title: 'Am'},
        {_id:3, title: 'Yoda'}
    ];
</script>
<style>
    section {
        width: 12em;
        padding: 1em;
        height: 7.5em;
    }
    div {
        height: 1.5em;
        width: 10em;
        text-align: center;
        border: 1px solid black;
        margin: 0.2em;
        padding: 0.3em;
    }
</style>
<section use:dndzone={{items}} on:consider={handleSort} on:finalize={handleSort}>
    {#each items as item(item._id)}
        <div>
            {item.title}
        </div>
    {/each}
<

What am I missing? Can you provide a way to reproduce?

EricSSartorius commented 1 week ago

I tried to reproduce with something simple in SvelteBlitz but was having trouble myself which makes me think that the current complexity of my app is related to the problem.

I am currently fetching data from the DB in the page.server.ts file, sending that to the +page.svelte file and setting it in a store so that I can implement custom functionality to lazyload items on scroll, then in the child Board component I am setting overrideItemIdKeyNameBeforeInitialisingDndZones. navigating to the page is giving me an error but after refresh it loads fine. I can try to simplify code in my repo and maybe get things to work but I'm not sure why everything is perfectly fine in Svelte v4 but not v5 though.