From 0456f4a041300a2c076c808b5b844d0677ffaba0 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Date: Tue, 19 Jul 2022 14:32:12 +0000
Subject: [PATCH] fix: use of sortable js with transition-group (#2160)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2160
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
---
 src/components/home/navigation.vue |  5 ++---
 src/views/list/ListKanban.vue      | 10 ++++------
 src/views/list/ListList.vue        |  2 ++
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index 05fb7d14..34ce714b 100644
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@@ -88,13 +88,12 @@
 						@end="saveListPosition"
 						handle=".handle"
 						:disabled="n.id < 0 || undefined"
-						tag="transition-group"
+						tag="ul"
 						item-key="id"
 						:data-namespace-id="n.id"
 						:data-namespace-index="nk"
 						:component-data="{
-							type: 'transition',
-							tag: 'ul',
+							type: 'transition-group',
 							name: !drag ? 'flip-list' : null,
 							class: [
 								'menu-list can-be-hidden',
diff --git a/src/views/list/ListKanban.vue b/src/views/list/ListKanban.vue
index 12f197ba..57c682b3 100644
--- a/src/views/list/ListKanban.vue
+++ b/src/views/list/ListKanban.vue
@@ -25,7 +25,7 @@
 				@start="() => dragBucket = true"
 				group="buckets"
 				:disabled="!canWrite"
-				tag="transition-group"
+				tag="ul"
 				:item-key="({id}) => `bucket${id}`"
 				:component-data="bucketDraggableComponentData"
 			>
@@ -133,7 +133,7 @@
 							:group="{name: 'tasks', put: shouldAcceptDrop(bucket) && !dragBucket}"
 							:disabled="!canWrite"
 							:data-bucket-index="bucketIndex"
-							tag="transition-group"
+							tag="ul"
 							:item-key="(task) => `bucket${bucket.id}-task${task.id}`"
 							:component-data="getTaskDraggableTaskComponentData(bucket)"
 						>
@@ -316,8 +316,7 @@ export default defineComponent({
 			return (bucket) => ({
 				ref: (el) => this.setTaskContainerRef(bucket.id, el),
 				onScroll: (event) => this.handleTaskContainerScroll(bucket.id, bucket.listId, event.target),
-				type: 'transition',
-				tag: 'div',
+				type: 'transition-group',
 				name: !this.drag ? 'move-card' : null,
 				class: [
 					'tasks',
@@ -337,8 +336,7 @@ export default defineComponent({
 		},
 		bucketDraggableComponentData() {
 			return {
-				type: 'transition',
-				tag: 'div',
+				type: 'transition-group',
 				name: !this.dragBucket ? 'move-bucket' : null,
 				class: [
 					'kanban-bucket-container',
diff --git a/src/views/list/ListList.vue b/src/views/list/ListList.vue
index 1555a3dd..4e5a2748 100644
--- a/src/views/list/ListList.vue
+++ b/src/views/list/ListList.vue
@@ -84,8 +84,10 @@
 						handle=".handle"
 						:disabled="!canWrite"
 						item-key="id"
+						tag="ul"
 						:component-data="{
 							class: { 'dragging-disabled': !canWrite || isAlphabeticalSorting },
+							type: 'transition-group'
 						}"
 					>
 						<template #item="{element: t}">