Vue.draggable: Transition Groups: Short Flicker when moving items between lists

[AnnaStuehlmeyer]

Hi,
i have a scenario where i want to move items between two horizontally aligned lists. Which already works flawlessly.
However, as soon as i add a transition-group the dragged item first appears in its new list (as expected) but then reappears for a split second in its original list.

Jsfiddle link

https://jsfiddle.net/3Lwc2zmf/35/

Step by step scenario

1. Drag one Item from List 1 to List 2
2. As soon as the item gets dropped it should shortly reapper in its original place.
   (If the item was taken from the front of list 1 this will shortly cause the entire list 1 to jump by one position and back)

Observations

Removing the transition group removes the "flickering", while also removing the animation.

Alternatively: Removing the :list-Props from both draggable-components also solves the flickering (while of course destroying the js update of both lists).
Maybe a timing issue?

Actual Solution

None yet

Expected Solution

Transfers betwen lists should ideally work seamlessly with transition-groups.
But i'm theoretically ready to make sacrifices, if there's a functional workaround to hide the reappearing item fast enough to prevent the flickering. :)

[AnnaStuehlmeyer]

I found this old ticket here:https://github.com/SortableJS/Vue.Draggable/issues/113#issuecomment-292822861
And can confirm that the mentioned workaround still works.

I found that this @remove-Listener removes the flickering entirely:

onRemove () {
        this.nonDraggableList = _.clone(this.draggableList) // lodash shallow clone
        this.hideDraggableList = true
        Vue.nextTick(() => {
          // show the real list again
          Vue.nextTick(() => {
            this.hideDraggableList = false
          })
        })
      },

So i found a workable solution for me.
However it would be nice, if we could get a warning in the documentation about the problem with the transition-group :)

[jskorlol]

Can you help me?
I want to fix this, but I don't know how to fix it.
If you can explain in more detail, I would really appreciate it.

In particular, the boxes at the bottom cause problems,
I don't know why ...

[gd4Ark]

I found this old ticket here:#113 (comment)
And can confirm that the mentioned workaround still works.

I found that this @remove-Listener removes the flickering entirely:

onRemove () {
        this.nonDraggableList = _.clone(this.draggableList) // lodash shallow clone
        this.hideDraggableList = true
        Vue.nextTick(() => {
          // show the real list again
          Vue.nextTick(() => {
            this.hideDraggableList = false
          })
        })
      },

So i found a workable solution for me.
However it would be nice, if we could get a warning in the documentation about the problem with the transition-group :)

Thanks, your solution works