Nested Keys Do Not Work in Each Loop

[ethanmichel0]

If the list that is being iterated over has a unique key id that is nested, the scroll over animation makes other items in the list disappear. For example, if this code sample from the documentation here is modified so that "items" becomes

    let items = [
        {id:1, title: 'I', nested: {id:1}},
        {id:2, title: 'Am', nested: {id:2}},
        {id:3, title: 'Yoda', nested: {id:3}}
    ];

and {#each items as item(item.nested.id)}

this breaks the drag and drop.

[isaacHagoel]

As the README states under rules, the lib expect an id prop at the top level of each item (the name 'id' itself can be overridden) and the same id that the library sees is expected to be used as the key for Svelte's each block. Does this have any practical implications (as in, how did you find youself in this situation)?

[ethanmichel0]

Thanks for responding @isaacHagoel .

Yeah the use case here is that the response from the api has a nested field that distinguishes entities from each other. I am creating a fantasy app with a "PlayerSeason" entity that represents a player's performance over the course of a season in football/soccer . PlayerSeason right now returns a nested playerid which is unique, and can distinguish from other players in the list I want to use the drag and drop for. As a work around I did:

playerSeasons = playerSeasons.map(
            playerSeason => {
                playerSeason.id = playerSeason.player.id // for the drag and drop component, the unique key cannot be nested
(playerSeason.player.id),
                // so we must copy this property so it is nested directly under playerSeason.
                // https://github.com/isaacHagoel/svelte-dnd-action/issues/464
                return playerSeason
            })

This resolved the issue. For next steps though, I think it would be helpful to either a) inform the user that the id cannot be nested and throw an error. Right now, if keys are not unique, an error is thrown and maybe a similar error could be thrown so that users are aware why there drag and drop list is breaking and can implement a fix b) allow nested keys. I think svelte natively supports this based on some testing I did, maybe there is a similar way to implement this?

Thanks, and let me know if you need any other information