Detached elements remain in memory after unmounting

[alexeyvokin]

Demo: https://stackblitz.com/edit/vitejs-vite-h7a122jp?file=src%2FColumnListItem.vue

Steps to reproduce:

1. Toggle the visibility of the list several times and hide the list
2. Observe that the detached items remain in memory when the list is hidden

2025-05-26.12.49.26_1080p.mov

Expected behavior:
Detached elements have been removed from memory

Actual behavior:
Detached elements remain in memory

Environment:
vue 3.5.13
vue3-dnd 2.1.0
react-dnd-html5-backend 16.0.1

[alexeyvokin]

Demo was updated! You can now use a browser console to inspect which elements remain in memory.
Just log the value of window.memoryLeaks to see the retained nodes.

At least one element consistently stays in memory in both Chrome 138.0.7204.158 and Safari 18.1.1, even after triggering garbage collection.

[alexeyvokin]

If I understand correctly, there is no problem with the package, but there is an issue with its peer dependency - dnd-core (from react-dnd). I have found a similar issue in their repo: Memory Leak when using useDrag and useDrop hooks · Issue #2884 · react-dnd/react-dnd

[hcg1023]

Your understanding is correct. I currently think it is a problem with focusElement or dnd-core.

[alexeyvokin]

Your understanding is correct. I currently think it is a problem with focusElement or dnd-core.

Do you have any idea how it can be fixed outside the peer dependency? Or can it only be fixed in dnd-core?