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

@@ -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',
+							type: 'transition-group',
-							tag: 'ul',
 							name: !drag ? 'flip-list' : null,
 							class: [
 								'menu-list can-be-hidden',

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',
+				type: 'transition-group',
-				tag: 'div',
 				name: !this.drag ? 'move-card' : null,
 				class: [
 					'tasks',
@@ -337,8 +336,7 @@ export default defineComponent({
 		},
 		bucketDraggableComponentData() {
 			return {
-				type: 'transition',
+				type: 'transition-group',
-				tag: 'div',
 				name: !this.dragBucket ? 'move-bucket' : null,
 				class: [
 					'kanban-bucket-container',

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}">