Non nested dnd is getting a id of id:id:dnd-shadow-placeholder-0000 and disappearing

[ThisModernDay]

I have a dnd element for a column (think Kanban style) and when drag the item that item is assigned the
id:dnd-shadow-placeholder-0000 id in place of its actual id. Therefore the item disappears when it is released because it's id has been overwritten.

I looked through the open and closed issues as well as the crazy nesting example. However, I'm not doing any nested dragging and dropping (yet).

this is the console log of e.detail from when I was investigating the issue

{items: Array(4), info: {…}}
info: {trigger: "draggedOverIndex", id: 125, source: "pointer"}
items: Array(4)
0: {id: "id:dnd-shadow-placeholder-0000", title: "List Name", created_by: null, updated_by: null, created_at: "2021-05-20T06:43:29.420Z", …}
1: {id: 126, title: "List Name", created_by: null, updated_by: null, created_at: "2021-05-20T06:48:12.701Z", …}
2: {id: 125, title: "List Name", created_by: null, updated_by: null, created_at: "2021-05-20T06:43:29.420Z", …}
3: {id: 127, title: "List Name", created_by: null, updated_by: null, created_at: "2021-05-20T06:48:13.855Z", …}
length: 4
__proto__: Array(0)
__proto__: Object

these are my handlers

  function dndConsiderColumns(e) {
    console.log(e.detail)
    items = e.detail.items
  }

  function dndFinalizeColumns(e) {
    console.log('dropped')
    items = e.detail.items
  }

and this is where I'm calling my dnd in my svelte

<div class="m-32">
  <div  class="app">
    <header class="flex items-center mb-2">
      <h1 class="bg-blue-500 rounded-l-md font-bold focus:outline-none focus:bg-gray-800 focus:ring-2 ring-blue-500 px-1" contenteditable bind:textContent={board.title} on:blur={() => updateTitle(board.id, board.title)}>{board.title}</h1>
      <button class="bg-green-500 rounded-r-md hover:bg-green-600 focus:outline-none px-1" on:click={() => addColumn(board.id,board.title)}>&plus; New List</button>
    </header>
    <div class="flex flex-wrap justify-start outline-none" use:dndzone="{{items: board.board_columns, flipDurationMs, type: 'columns'}}" on:consider="{dndConsiderColumns}" on:finalize="{dndFinalizeColumns}">
        {#each board.board_columns as column (column.id)}
        <div class="bg-gray-700 rounded-md p-5 m-2 w-auto h-auto flex-initial" animate:flip={{duration: flipDurationMs}}>
          <div class="col-title">
            
            <div class="flex items-center">
              <input class="w-full text-gray-400 font-bold text-center bg-gray-800 rounded-md my-1 focus:outline-none focus:text-gray-300" type="text" bind:value={board.board_columns.title} on:blur={() => updateColumn(column.id, board.board_columns.title)}/>
              <button class="bg-red-500 rounded-md hover:bg-red-600 focus:outline-none my-1" on:click={() => removeColumn(column.id)}><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg></button>
            </div>
          </div>
          <div class="cards">
            {#each column.board_cards as card (card.id)}
              <div class="bg-gray-500 my-2 rounded-md p-2">
                <div class="flex items-center justify-end">
                  <button class="focus:outline-none p-1 rounded-md hover:bg-gray-600">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
                    </svg>
                  </button>
                </div>
                <textarea class="bg-gray-800 text-gray-400 rounded-md break-words p-2 my-1 max-w-full resize-none focus:outline-none focus:text-gray-300"  bind:value={column.board_cards.task} on:blur={() => updateTask(card.id, column.board_cards.task)}/>
              </div>
            {/each}
          </div>
          <div>
            <button class="w-full bg-green-500 rounded-md hover:bg-green-600 focus:outline-none my-1" on:click={() => addTask(column.id,board.id,board.title)} transition:slide>Add Task</button>
          </div>
        </div>
        {/each}
    </div>
  </div>
</div>

example of what is happening

[isaacHagoel]

Hi,
Thanks for this. Do you mind creating a simple REPL that reproduces this issue?
I assume you saw the official board example (https://svelte.dev/repl/288f827275db4054b23c437a572234f6?version=3.38.2).
Thanks,
Isaac

[ThisModernDay]

yeah here you go https://svelte.dev/repl/00cfb9d6c9c243659fbf4ca8f4125409?version=3.38.2

[isaacHagoel]

you are assigning to items in your consider and finalize handlers but not using it anywhere in the markup.
you should be updating the data structure that is passed as items to the dndzone and to the each block that renders the list in both handlers.

[ThisModernDay]

I realize that now.. that's what I get for staying up all night coding sorry for bothering you. I'll mark the issue as closed.

[isaacHagoel]

all good. let me know if i can help