Items disappear after moving them

[m5rian]

Hello everyone!

I'm facing an issue while using this library. When moving the items they seem to disappear from the screen. I searched in my html code by inspecting the side for it, though I couldn't find them after I moved them, even though the array still has a size of 3. (Check the video)

Here is my a bit simplified code. Does somebody know why this happens and how to avoid it?

<script>
    import {dndzone} from "svelte-dnd-action";

    let slashCommands = [];
    async function loadData() {
        slashCommands = dataIGot;
        return true;
    }

    function handleDndConsider(e) {
    }

    function handleDndFinalize(e) {
        slashCommands = e.detail.items
        console.log(slashCommands)
    }
</script>

<section>
    {#await loadData()}
        <!-- Loading screen -->
    {:then _unused}
        <!-- Navbar -->

        <div class="slashCommands-wrapper" use:dndzone="{{items: slashCommands, dropFromOthersDisabled: true,flipDurationMs: 500}}" on:consider="{handleDndConsider}"
             on:finalize="{handleDndFinalize}">
            {#each slashCommands as slashCommand

https://user-images.githubusercontent.com/69646823/140531016-25bba08d-6898-4cf2-a115-b7b8f17953dd.mp4

}
                <Command slashCommand={slashCommand}/>
            {/each}
        </div>
    {/await}
</section>

Thanks in advance.

https://user-images.githubusercontent.com/69646823/140531312-3ec4edcf-4bfc-41f1-ae6b-8972a7cba90a.mp4

[isaacHagoel]

Your consider handler has to update the list of items.

On Sat, Nov 6, 2021, 01:58 Marian @.***> wrote:

Hello everyone!

I'm facing an issue while using this library. When moving the items they seem to disappear from the screen. I searched in my html code by inspecting the side for it, though I couldn't find them after I moved them, even though the array still has a size of 3. (Check the video)

Here is my a bit simplified code. Does somebody know why this happens and how to avoid it?

{#await loadData()} {:then _unused}

{#each slashCommands as slashCommand https://user-images.githubusercontent.com/69646823/140531016-25bba08d-6898-4cf2-a115-b7b8f17953dd.mp4 } {/each}

{/await}

Thanks in advance.

https://user-images.githubusercontent.com/69646823/140531312-3ec4edcf-4bfc-41f1-ae6b-8972a7cba90a.mp4

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/324, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC63UB5ESAY46R2JKIDUKPWK3ANCNFSM5HOBAJSA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[m5rian]

Adding

    function handleDndConsider(e) {
        slashCommands = e.detail.items
    }

doesn't seem to do anything. Items still disappear after moving them.

[isaacHagoel]

Please make a REPL and i will fix it for you

On Sat, Nov 6, 2021, 08:57 Marian @.***> wrote:

Adding

function handleDndConsider(e) {
    slashCommands = e.detail.items
}

doesn't seem to do anything. Items still disappear after moving them.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/324#issuecomment-962245477, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZCYP2TMZKOLZTG6VI2LUKRHLTANCNFSM5HOBAJSA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[m5rian]

Sorry, did you mean repo? Or what does REPL mean?

[isaacHagoel]

the REPL: https://svelte.dev/repl all of the examples in the README are implemented in the REPL. it is an easy way to share code (just make sure u save it and then send me a link)

[m5rian]

I tried adding my code to the repl. While doing this some errors occurred which I can't seem to fix. One of them is for example "Unterminated string constant (33:23)" in my provided json array. I'm not sure why those errors appear. To me nothing looks wrong and parsing it with my local project I don't have any issues. I couldn't solve this issue yet, which results in not having anything under the "Result" tab. I hope that I made only minor mistakes which you are able to see.

I provided you the repl anyways. I hope this is okay for you. If you know what causes this weird error, I could fix it and make the project work in the repl too. https://svelte.dev/repl/6db5387913ca4086a22b295be8888aee?version=3.44.1

I also have a github repository of this project. Not sure if it's a bit too much work to clone it for you, but if it won't work there you could check it out there. https://github.com/M5rian/SlashCommandManager

I appreciate your efforts, thank you

[isaacHagoel]

The REPL complains because these components don't exist import CommandSettings from "./CommandSettings.svelte"; import SubcommandGroup from "./SubcommandGroup.svelte";

On Mon, Nov 8, 2021 at 5:15 AM Marian @.***> wrote:

I tried adding my code to the repl. While doing this some errors occurred which I can't seem to fix. One of them is for example "Unterminated string constant (33:23)" in my provided json array. I'm not sure why those errors appear. To me nothing looks wrong and parsing it with my local project I don't have any issues. I couldn't solve this issue yet, which results in not having anything under the "Result" tab. I hope that I made only minor mistakes which you are able to see.

I provided you the repl anyways. I hope this is okay for you. If you know what causes this weird error, I could fix it and make the project work in the repl too. https://svelte.dev/repl/6db5387913ca4086a22b295be8888aee?version=3.44.1

I also have a github repository of this project. Not sure if it's a bit too much work to clone it for you, but if it won't work there you could check it out there. https://github.com/M5rian/SlashCommandManager

I appreciate your efforts, thank you

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/324#issuecomment-962657288, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC7W2M7HKIX5KQOMARLUK265RANCNFSM5HOBAJSA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[m5rian]

I fixed all stuff I can find. Without setting the slashCommands variable to my json response, everything works. Though when I add my json to it, it still gives me an error. https://svelte.dev/repl/6db5387913ca4086a22b295be8888aee?version=3.44.1

[isaacHagoel]

See https://svelte.dev/repl/d6c98750176d4839996ea8a03ded26cd?version=3.44.1 the issue with the JSON was some multiline strings inside " " (copy paste issue I would guess) another issue was that the each block wasn't keyed (as the README says that lib requires it) also flip animation wasn't configured. not sure if intentional. added it in a comment

[m5rian]

Oh yeah it seems like keying was the issue, though I don't exactly understand what it does. What is the id you access there? Is it generated by svelte? What does it do? Why is it needed? What would the value be?

I hope that you can clarify this, even though this issue should be related to your library, not svelte itself.

[isaacHagoel]

Keying in general is used so that Svelte can keep track of items in an array that can change. Instead of thinking about it as "the second item" it can track it as "the item with id [some id]". That way it doesn't have to rerender the whole thing every time the order of the items changes. I am passing the id from your JSON object. As long as the id is unique it can be anything (but commonly strings are used).

On Wed, Nov 10, 2021, 02:29 Marian @.***> wrote:

Oh yeah it seems like keying was the issue, though I don't exactly understand what it does. What is the id you access there? Is it generated by svelte? What does it do? Why is it needed? What would the value be?

I hope that you can clarify this, even though this issue should be related to your library, not svelte itself.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/324#issuecomment-964259812, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC4ZLNEMXSV3YRJABP3ULE433ANCNFSM5HOBAJSA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[m5rian]

So the id gets generated by svelte itself for each item?

[isaacHagoel]

The id from your own json file is passed to Svelte and Svelte associates it with the dom element that represents the item. It is like "key" in React.

On Thu, Nov 11, 2021, 03:10 Marian @.***> wrote:

So the id gets generated by svelte itself for each item?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/324#issuecomment-965494286, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC5FWHTUIS3UU73M7XTULKKQXANCNFSM5HOBAJSA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[m5rian]

Oh I see! Got it now :) Thank you so much for the help