issue with `transition-group` in composition API

[Chevrefeuille]

First of all, thanks for the great lib!

Jsfiddle link

https://stackblitz.com/edit/vitejs-vite-tdboa5?file=src/App.vue

Step by step scenario

I am using the composition API with vue 3. I tried to make a draggable list with transitions, following the example from https://sortablejs.github.io/vue.draggable.next/#/transition-example-2 but adapting it to the composition API. However, I get the following error: Uncaught (in promise) TypeError: domElement is null.

It seems that the error comes from the item-key="order" prop, as if I remove it, or put something different (wich is not a valid key), the error disappears, but I then get the following warning [Vue warn]: <TransitionGroup> children must be keyed..

My issue seem to be the same than this person : https://stackoverflow.com/questions/72269062/draggable-with-dynamic-groups. But they didn't seem to have got any useful answer.

Am I missing something ?

Thanks!

[dyc3]

item-key seems to be kinda buggy. Try omitting item-key and instead set the key prop on your elements like this:

<template #item="{ element }">
  <li :key="order">
    {{ element.name }}
  </li>
</template>

[Chevrefeuille]

Hello! Thanks for your answer. Although it doesn't seem to be working for me (could you make it work on the fiddle I provided?). I still have the warning [Vue warn]: <TransitionGroup> children must be keyed, and transitions are not applied when the list is sorted.

[Lionad-Morotar]

Hello! Thanks for your answer. Although it doesn't seem to be working for me (could you make it work on the fiddle I provided?). I still have the warning [Vue warn]: <TransitionGroup> children must be keyed, and transitions are not applied when the list is sorted.

Hello，item-key in vue-draggable-next seems to be buggy，try this: vue-draggable with transition-group，and I make your fiddle works without warning

[radek-altof]

Same thing happening to me. Tried to adapt the same transition example for Vue 3. Even tried copy pasting the provided example (using options api) with no modifications, still getting the same error.

Bare-bone example:

<template>
  <draggable
    tag="transition-group"
    :component-data="{
      tag: 'ul',
      name: 'flip-list',
    }"
    :list="exampleValues"
    item-key="id"
  >
    <template #item="{ element }">
      <li>{{ element.name }}</li>
    </template>
  </draggable>
</template>

<script setup>
import { ref } from 'vue';
import draggable from 'vuedraggable';

const exampleValues = ref([{
  id: 1,
  name: 'John',
}, {
  id: 2,
  name: 'Emily',
}, {
  id: 3,
  name: 'Rachel',
}, {
  id: 4,
  name: 'Chris',
}]);
</script>

<style>
.flip-list-move {
  transition: all 0.5s ease;
}
</style>

Getting the following error:

TypeError: domElement is null
    addContext componentStructure.js:2
    updated componentStructure.js:33
    updated componentStructure.js:32
    mounted vuedraggable.js:125
    createHook runtime-core.esm-bundler.js:2709
    callWithErrorHandling runtime-core.esm-bundler.js:155
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:164
    __weh runtime-core.esm-bundler.js:2684
    flushPostFlushCbs runtime-core.esm-bundler.js:341
    flushJobs runtime-core.esm-bundler.js:395
    promise callback*queueFlush runtime-core.esm-bundler.js:280
    queueJob runtime-core.esm-bundler.js:274
    effect runtime-core.esm-bundler.js:5710
    triggerEffect reactivity.esm-bundler.js:394
    triggerEffects reactivity.esm-bundler.js:384
    triggerRefValue reactivity.esm-bundler.js:1000
    set value reactivity.esm-bundler.js:1045
    setup ----.vue:128
    createHook runtime-core.esm-bundler.js:2709
    ...

Running on:

• [email protected]
• [email protected]

[tobychidi]

I have this error too. Transition does not work in Vue 3

[gerritvanaaken]

Different error message, but might be same problem:

First a Vue Warning in the console: [Vue warn]: Unhandled error during execution of updated at <Draggable onUpdate=fn<changeSongs> modelValue=

Then a solid JavaScript error: Uncaught (in promise) TypeError: Cannot set properties of null (setting '__draggable_context')

Changing the "tag" Property from "transition-group" back to "ul" fixes the errors, but the animation is gone, of course.

[gerritvanaaken]

I switched to a forked version of this repo: https://www.npmjs.com/package/zhyswan-vuedraggable

This fixed the issue for me. If you still get (chinese) error codes in the console, try to translate them with deepl.com – I had to slightly modify my HTML code to make it all work perfectly.

[90ker]

I have the same problem, and I found the [el] in vNode is 'null' when mounted.

[a572251465]

Hello, do you have any plans to fix this issue

[durbanitas]

Hello there - seeing the same problem.

Any solutions?

[stanJ]

Hello! Thanks for your answer. Although it doesn't seem to be working for me (could you make it work on the fiddle I provided?). I still have the warning [Vue warn]: <TransitionGroup> children must be keyed, and transitions are not applied when the list is sorted.

Hello，item-key in vue-draggable-next seems to be buggy，try this: vue-draggable with transition-group，and I make your fiddle works without warning

It is still not solved. In your example, if you delete <transition-group>, it still works. Because the result comes from animation: 200

[cfrow]

What ultimately worked for me was to remove tag="transition-group".

[boutzamat]

I might be late to the party, but literally removing the tag="transition-group" (as mentioned above) and v-binding the computed "dragOptions" as in the demo, worked for me:

const transitionOptions = computed(() => { return { animation: 200, group: "description", disabled: false, ghostClass: "ghost", }; });

[niladrix719]

its not working for me

        <draggable
            :key="updateCount"
            :item-key="updateCount.toString()"
            v-model="SimulatorState.circuit_list"
            class="list-group"
            tag="ul"
            :component-data="{
                tag: 'div',
                type: 'transition-group',
                name: !drag ? 'flip-list' : null,
            }"
            v-bind="dragOptions"
            @start="drag = true"
            @end="drag = false"
        >

and i have this computed :

const dragOptions = computed(() => {
    return {
        animation: 200,
        group: 'description',
        disabled: false,
        ghostClass: 'ghost',
    }
})

[danrot]

I just ran into the same issue, and I found a way to solve it. The problem seems to be that the transition-group tag expects a tag property, which it will use to render the transition group. I've passed a tag name to component-data and then the error was gone (not sure yet if everything works though). Currently it looks like that for me (slightly adjusted compared to the original code without testing):

    <draggable
        v-model="data"
        handle=".handle"
        tag="transition-group"
        :component-data="{ tag: 'div' }"
        @start="drag = true"
        @end="drag = false"
      >
        <template v-slot:item="{ element }">
          <div :key="`section_${element.id}`" :name="!drag ? 'flip-list' : null" class="section-wrapper">
            <div class="handle">handle</div>
            {{ JSON.stringify(element) }}
          </div>
        </template>
      </draggable>

[avinmaster]

Also, you can do like this (from example):

<draggable
      v-model="myArray"
      group="people"
      @start="drag = true"
      @end="drag = false"
      item-key="id"
      animation="200"
  >
    <template #item="{element}">
      <div>{{ element.name }}</div>
    </template>
  </draggable>

[Durss]

Most of the "solutions" above consist of removing the transition-group and setting the animation prop. You'll get an animation when dragging items but that is not equivalent.

The difference between the 2 solutions being that if you sort items by code, you won't get any transition with the animation prop. With the transition-group you should have an animation transition even when sorting via code.

I personally switched to this alternative that's still active to date: https://github.com/Alfred-Skyblue/vue-draggable-plus