Pointer drag and drop issue with expanded item

In my interface, I have an expansion panel component that can be expanded/collapsed that I am now using svelte-dnd-action to reorder.

If the panel not expanded, dnd works great, but as soon as I try to drag a panel that is open, it disappears (either immediate when dragging, or after being dropped):

https://user-images.githubusercontent.com/177476/107232425-62c35200-69ef-11eb-9719-b93c4c5e7056.mp4

If I keep trying to drag a few, at some point this error shows up in the console as well:

What’s surprising is keyboard interaction works as expected with an expanded item:

https://user-images.githubusercontent.com/177476/107232701-b635a000-69ef-11eb-8d21-cf504adeb172.mp4

I tried to create minimal reproduction of the issue but I haven’t been able to just yet (I’ll keep trying), although there is one oddity in the current example: If the item is “expanded” and you drag it, it resizes back to “collapsed”, although it doesn’t disappear like in my case. It appears the internal state of the component is lost/reset when it is dnd but not with keyboard interactions.

• https://svelte.dev/repl/70509df52058467f8a2cdd49810cd487?version=3.32.1

[isaacHagoel]

Good luck! This library seems to use the native drag and drop api which i was actively trying to avoid 😃 I think your internal state will still not persist if svelte re renders the component for any reason. Let me know if i can be of further assistance.

On Wed, Feb 10, 2021, 07:12 Sean Lynch [e-mail] wrote:

Looks like SortableJS https://sortablejs.github.io/Sortable/ works this way, and I was able to setup a quick REPL https://svelte.dev/repl/bb527bb8a2f849e19cd5956fc76bb668?version=3.32.2 that leverages slots and transitions and doesn’t loose the internal state. I need to kick it around a little more but appears to handle all my needs thus far.

Thanks again for your time investigating this. I think I’m going to investigate using SortableJS in an action / component.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/247#issuecomment-776212992, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC4AEPMEGR6AQXRWN4DS6GJLVANCNFSM4XJFLT2Q .

[isaacHagoel]

Keyboard ‘dragging’ has no intermediary states and no shadow items. It is much simpler.

On Tue, Feb 9, 2021, 06:43 Sean Lynch [e-mail] wrote:

@isaacHagoel https://github.com/isaacHagoel Thanks for the info. Let me dig in a little more tonight and see if I can reproduce it in the REPL.

One curiosity, the issue is not present (and state maintained) when using the keyboard to move items. I assume this is handled differently intentionally?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/247#issuecomment-775395494, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC2YPMBH2WU2UU2JF5DS6A5FJANCNFSM4XJFLT2Q .