sortablejs-vue3 Issues using with TransistionGroup

Great package. Thanks for your work. I'm having trouble using it with Vue3's Transition Group (https://vuejs.org/guide/built-ins/transition-group.html).

Using <Sortable> inside <transition-group> renders the sortable list inside a wrapper which breaks transistion-group. Specifying tag="transition-group" renders the tag but none of the transition-group functionality.

Am I missing something? Is there a work around?

Have created a fiddle. https://stackblitz.com/edit/vitejs-vite-jycoxf?file=src/App.vue

Oct 24 '22 07:10 johnpitchers

Thanks for the issue and repro @johnpitchers!

I'll need to think on / play with this but I'm semi-sure there's a pretty simple fix for this.

Oct 30 '22 23:10 MaxLeiter

I was able to use individual <Transition> elements instead of transition groups. For this particular example app, it was necessary to hide the element using v-if before splicing it from the list so it transitioned out nicely. https://stackblitz.com/edit/vitejs-vite-r3dsdx?file=src%2FApp.vue

Nov 03 '22 07:11 johnpitchers

Awesome. I wonder if I can detect being nested TransitionGroups and if so, insert the single Transitions...

Nov 04 '22 22:11 MaxLeiter