Dragged item gets removed from dom entirely

[isaacfink]

In the console I can see this error

Uncaught TypeError: Cannot read properties of undefined (reading 'parentElement')
    at keepOriginalElementInDom (

Here is my code

<script lang="ts">
	import { dndzone, type DndEvent } from 'svelte-dnd-action';
	
	let { images = $bindable()}: { images: ImageType[] } = $props();

	function handleDndConsider(e: CustomEvent<DndEvent<ImageType>>) {
		images = e.detail.items;
	}
	function handleDndFinalize(e: CustomEvent<DndEvent<ImageType>>) {
		images = e.detail.items;
	}
</script>


	<div
		use:dndzone={{ items: images, flipDurationMs: 300 }}
		onconsider={handleDndConsider}
		onfinalize={handleDndFinalize}
		class="mt-3 grid grid-cols-5 gap-3"
	>
		{#each images as image}
			<div class="aspect-square overflow-hidden rounded-md">
				...
			</div>
		{/each}
	</div>
	

[isaacHagoel]

Do you mind making a minimal REPL for me to debug? I can't copy paste your example into a REPL because there are missing parts.

…

On Tue, May 20, 2025 at 12:28 AM Isaac Finkelstein ***@***.***> wrote: *isaacfink* created an issue (isaacHagoel/svelte-dnd-action#648) <#648> In the console I can see this error Uncaught TypeError: Cannot read properties of undefined (reading 'parentElement') at keepOriginalElementInDom ( Here is my code <script lang="ts"> import { dndzone, type DndEvent } from 'svelte-dnd-action'; let { images = $bindable()}: { images: ImageType[] } = $props(); function handleDndConsider(e: CustomEvent<DndEvent<ImageType>>) { images = e.detail.items; } function handleDndFinalize(e: CustomEvent<DndEvent<ImageType>>) { images = e.detail.items; } </script> <div use:dndzone={{ items: images, flipDurationMs: 300 }} onconsider={handleDndConsider} onfinalize={handleDndFinalize} class="mt-3 grid grid-cols-5 gap-3" > {#each images as image} <div class="aspect-square overflow-hidden rounded-md"> ... </div> {/each} </div> — Reply to this email directly, view it on GitHub <#648>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC77PU5KEUU2RJI5TTT27HTCLAVCNFSM6AAAAAB5N5KAOSVHI2DSMVQWIX3LMV43ASLTON2WKOZTGA3TIMBUG4YTSMQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[StuBedore]

Do you mind making a minimal REPL for me to debug? I can't copy paste your
example into a REPL because there are missing parts.
…

I'm also getting the same error. Here is a minimal REPL:
https://svelte.dev/playground/23cc29d8f5b64da2af2fab2a3973f281

[isaacHagoel]

The issue with this REPL is that the each block is not keyed. It needs to be #each items as item(item.id)

…

On Wed, May 21, 2025, 20:02 Stu Bedore ***@***.***> wrote: *StuBedore* left a comment (isaacHagoel/svelte-dnd-action#648) <#648 (comment)> Do you mind making a minimal REPL for me to debug? I can't copy paste your example into a REPL because there are missing parts. … <#m_-2017908896908036129_> I'm also getting the same error. Here is a minimal REPL: https://svelte.dev/playground/23cc29d8f5b64da2af2fab2a3973f281 — Reply to this email directly, view it on GitHub <#648 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC6I6UNYJT3ULHQCKP327RFM3AVCNFSM6AAAAAB5N5KAOSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQOJXGM3TCMZRGM> . You are receiving this because you commented.Message ID: ***@***.***>

[StuBedore]

The issue with this REPL is that the each block is not keyed. It needs to
be
#each items as item(item.id)
…

You right

[isaacfink]

@isaacHagoel That solved it for me too, interesting why though, if the items in the finalize handler contains all the items in my array

[isaacHagoel]

The lib keeps a reference to an element but if the array is not keyed svelte create new elements with the same data

…

On Wed, May 21, 2025, 22:38 Isaac Finkelstein ***@***.***> wrote: *isaacfink* left a comment (isaacHagoel/svelte-dnd-action#648) <#648 (comment)> @isaacHagoel <https://github.com/isaacHagoel> That solved it for me too, interesting why though, if the items in the finalize handler contains all the items in my array — Reply to this email directly, view it on GitHub <#648 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZCZREEFFHZHUTDM7H7D27RXTDAVCNFSM6AAAAAB5N5KAOSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQOJXHAYTQNJTGQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[chanmathew]

@isaacHagoel I'm facing the same issue and i do have a key, here's a REPL:
https://svelte.dev/playground/d4d858eecdee43e8a994efeb51f870d8?version=5.33.14

I think there is something else at play here, notice how when i have a longer list of array, the parentElement error shows up, but if you play with the REPL and trim down the items to say like 5 items in the array, it works again. Strange.

[jakobrosenberg]

I have a nested list. Adding the key fixed it for the outer list, but not the inner.

[isaacHagoel]

REPL pls

…

On Thu, Jun 5, 2025, 17:55 Jakob Rosenberg ***@***.***> wrote: *jakobrosenberg* left a comment (isaacHagoel/svelte-dnd-action#648) <#648 (comment)> I have a nested list. Adding the key fixed it for the outer list, but not the inner. — Reply to this email directly, view it on GitHub <#648 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC2WETNF3PZCVZ7QANT3B7ZXRAVCNFSM6AAAAAB5N5KAOSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDSNBTGEZTONJZGU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[chanmathew]

Hi @isaacHagoel did you see my comment also with the REPL? #648 (comment)

[isaacHagoel]

@chanmathew as the comment says it is because of the transition directive. The README refers to it.