From 0c092deedc6706d515e2ae8b2c3e6cd8f5c5c8cc Mon Sep 17 00:00:00 2001
From: SP12893678 <36910625+SP12893678@users.noreply.github.com>
Date: Thu, 8 Aug 2024 01:41:50 +0800
Subject: [PATCH] Remove extra div insdie ul element (#23116)

---
 .changeset/rich-seals-type.md                 |  5 ++
 .../_system/system-fields/system-fields.vue   | 29 ++++----
 .../_system/system-modules/system-modules.vue | 70 +++++++++----------
 app/src/interfaces/files/files.vue            |  7 +-
 app/src/interfaces/list-m2a/list-m2a.vue      |  5 +-
 app/src/interfaces/list-m2m/list-m2m.vue      |  5 +-
 app/src/interfaces/list-o2m/list-o2m.vue      |  5 +-
 app/src/interfaces/list/list.vue              | 48 ++++++-------
 .../data-model/collections/collections.vue    | 48 ++++++-------
 9 files changed, 118 insertions(+), 104 deletions(-)
 create mode 100644 .changeset/rich-seals-type.md

diff --git a/.changeset/rich-seals-type.md b/.changeset/rich-seals-type.md
new file mode 100644
index 0000000000..989a70d72f
--- /dev/null
+++ b/.changeset/rich-seals-type.md
@@ -0,0 +1,5 @@
+---
+'@directus/app': patch
+---
+
+Fixed list structure in draggable lists
diff --git a/app/src/interfaces/_system/system-fields/system-fields.vue b/app/src/interfaces/_system/system-fields/system-fields.vue
index 1aa0f364f2..06f9630384 100644
--- a/app/src/interfaces/_system/system-fields/system-fields.vue
+++ b/app/src/interfaces/_system/system-fields/system-fields.vue
@@ -95,18 +95,23 @@ const removeField = (field: string) => {
 		<v-list v-if="fields.length === 0">
 			<v-notice class="no-fields">{{ t('interfaces.system-fields.no_fields') }}</v-notice>
 		</v-list>
-		<v-list v-else>
-			<draggable v-model="fields" item-key="key" handle=".drag-handle" v-bind="{ 'force-fallback': true }">
-				<template #item="{ element: field }">
-					<v-list-item block>
-						<v-icon name="drag_handle" class="drag-handle" left />
-						<div class="name">{{ field.displayName }}</div>
-						<div class="spacer" />
-						<v-icon name="close" clickable @click="removeField(field.key)" />
-					</v-list-item>
-				</template>
-			</draggable>
-		</v-list>
+		<draggable
+			v-else
+			v-model="fields"
+			tag="v-list"
+			item-key="key"
+			handle=".drag-handle"
+			v-bind="{ 'force-fallback': true }"
+		>
+			<template #item="{ element: field }">
+				<v-list-item block>
+					<v-icon name="drag_handle" class="drag-handle" left />
+					<div class="name">{{ field.displayName }}</div>
+					<div class="spacer" />
+					<v-icon name="close" clickable @click="removeField(field.key)" />
+				</v-list-item>
+			</template>
+		</draggable>
 		<v-menu placement="bottom-start" show-arrow>
 			<template #activator="{ toggle }">
 				<button class="toggle" @click="toggle">
diff --git a/app/src/interfaces/_system/system-modules/system-modules.vue b/app/src/interfaces/_system/system-modules/system-modules.vue
index 15f85c18e5..8d3ccdd4d0 100644
--- a/app/src/interfaces/_system/system-modules/system-modules.vue
+++ b/app/src/interfaces/_system/system-modules/system-modules.vue
@@ -210,41 +210,41 @@ function remove(id: string) {
 
 <template>
 	<div class="system-modules">
-		<v-list class="list">
-			<draggable
-				v-model="valuesWithData"
-				:set-data="hideDragImage"
-				item-key="id"
-				handle=".drag-handle"
-				:animation="150"
-				v-bind="{ 'force-fallback': true }"
-			>
-				<template #item="{ element }">
-					<v-list-item
-						block
-						:class="{ enabled: element.enabled }"
-						:clickable="element.type === 'link'"
-						@click="element.type === 'link' ? edit(element.id) : undefined"
-					>
-						<v-icon class="drag-handle" name="drag_handle" />
-						<v-icon class="icon" :name="element.icon" />
-						<div class="info">
-							<div class="name">{{ element.name }}</div>
-							<div class="to">{{ element.to }}</div>
-						</div>
-						<div class="spacer" />
-						<v-icon v-if="element.locked === true" name="lock" />
-						<v-icon v-else-if="element.type === 'link'" name="clear" @click.stop="remove(element.id)" />
-						<v-icon
-							v-else
-							:name="element.enabled ? 'check_box' : 'check_box_outline_blank'"
-							clickable
-							@click.stop="updateItem(element, { enabled: !element.enabled })"
-						/>
-					</v-list-item>
-				</template>
-			</draggable>
-		</v-list>
+		<draggable
+			v-model="valuesWithData"
+			tag="v-list"
+			class="list"
+			:set-data="hideDragImage"
+			item-key="id"
+			handle=".drag-handle"
+			:animation="150"
+			v-bind="{ 'force-fallback': true }"
+		>
+			<template #item="{ element }">
+				<v-list-item
+					block
+					:class="{ enabled: element.enabled }"
+					:clickable="element.type === 'link'"
+					@click="element.type === 'link' ? edit(element.id) : undefined"
+				>
+					<v-icon class="drag-handle" name="drag_handle" />
+					<v-icon class="icon" :name="element.icon" />
+					<div class="info">
+						<div class="name">{{ element.name }}</div>
+						<div class="to">{{ element.to }}</div>
+					</div>
+					<div class="spacer" />
+					<v-icon v-if="element.locked === true" name="lock" />
+					<v-icon v-else-if="element.type === 'link'" name="clear" @click.stop="remove(element.id)" />
+					<v-icon
+						v-else
+						:name="element.enabled ? 'check_box' : 'check_box_outline_blank'"
+						clickable
+						@click.stop="updateItem(element, { enabled: !element.enabled })"
+					/>
+				</v-list-item>
+			</template>
+		</draggable>
 
 		<v-button @click="edit('+')">{{ t('add_link') }}</v-button>
 
diff --git a/app/src/interfaces/files/files.vue b/app/src/interfaces/files/files.vue
index 248021c020..ceca43d382 100644
--- a/app/src/interfaces/files/files.vue
+++ b/app/src/interfaces/files/files.vue
@@ -298,11 +298,14 @@ const allowDrag = computed(
 			/>
 		</template>
 
-		<v-list v-else class="files">
+		<template v-else>
 			<v-notice v-if="displayItems.length === 0">{{ t('no_items') }}</v-notice>
 
 			<draggable
+				v-else
 				:model-value="displayItems"
+				tag="v-list"
+				class="files"
 				item-key="id"
 				handle=".drag-handle"
 				:disabled="!allowDrag"
@@ -354,7 +357,7 @@ const allowDrag = computed(
 					</v-list-item>
 				</template>
 			</draggable>
-		</v-list>
+		</template>
 
 		<div class="actions">
 			<v-button v-if="enableCreate && createAllowed" :disabled="disabled" @click="showUpload = true">
diff --git a/app/src/interfaces/list-m2a/list-m2a.vue b/app/src/interfaces/list-m2a/list-m2a.vue
index cdaf3e13b5..5ab0809384 100644
--- a/app/src/interfaces/list-m2a/list-m2a.vue
+++ b/app/src/interfaces/list-m2a/list-m2a.vue
@@ -351,11 +351,12 @@ const allowDrag = computed(() => canDrag.value && totalItemCount.value <= limitW
 			/>
 		</template>
 
-		<v-list v-else>
+		<template v-else>
 			<v-notice v-if="displayItems.length === 0">{{ t('no_items') }}</v-notice>
 
 			<draggable
 				:model-value="displayItems"
+				tag="v-list"
 				item-key="$index"
 				:set-data="hideDragImage"
 				:disabled="!allowDrag"
@@ -400,7 +401,7 @@ const allowDrag = computed(() => canDrag.value && totalItemCount.value <= limitW
 					</v-list-item>
 				</template>
 			</draggable>
-		</v-list>
+		</template>
 
 		<div class="actions">
 			<v-menu v-if="enableCreate && createCollections.length > 0" :disabled="disabled" show-arrow>
diff --git a/app/src/interfaces/list-m2m/list-m2m.vue b/app/src/interfaces/list-m2m/list-m2m.vue
index 8396971acf..320a382e2d 100644
--- a/app/src/interfaces/list-m2m/list-m2m.vue
+++ b/app/src/interfaces/list-m2m/list-m2m.vue
@@ -522,13 +522,14 @@ const { createAllowed, updateAllowed, deleteAllowed, selectAllowed } = useRelati
 				/>
 			</template>
 
-			<v-list v-else>
+			<template v-else>
 				<v-notice v-if="displayItems.length === 0">
 					{{ t('no_items') }}
 				</v-notice>
 
 				<draggable
 					:model-value="displayItems"
+					tag="v-list"
 					item-key="id"
 					handle=".drag-handle"
 					:disabled="!allowDrag"
@@ -572,7 +573,7 @@ const { createAllowed, updateAllowed, deleteAllowed, selectAllowed } = useRelati
 						</v-list-item>
 					</template>
 				</draggable>
-			</v-list>
+			</template>
 
 			<div class="actions" :class="layout">
 				<template v-if="layout === LAYOUTS.TABLE">
diff --git a/app/src/interfaces/list-o2m/list-o2m.vue b/app/src/interfaces/list-o2m/list-o2m.vue
index 990a4080de..62df186b63 100644
--- a/app/src/interfaces/list-o2m/list-o2m.vue
+++ b/app/src/interfaces/list-o2m/list-o2m.vue
@@ -471,13 +471,14 @@ function getLinkForItem(item: DisplayItem) {
 				/>
 			</template>
 
-			<v-list v-else>
+			<template v-else>
 				<v-notice v-if="displayItems.length === 0">
 					{{ t('no_items') }}
 				</v-notice>
 
 				<draggable
 					:model-value="displayItems"
+					tag="v-list"
 					item-key="id"
 					handle=".drag-handle"
 					:disabled="!allowDrag"
@@ -521,7 +522,7 @@ function getLinkForItem(item: DisplayItem) {
 						</v-list-item>
 					</template>
 				</draggable>
-			</v-list>
+			</template>
 
 			<div class="actions" :class="layout">
 				<template v-if="layout === LAYOUTS.TABLE">
diff --git a/app/src/interfaces/list/list.vue b/app/src/interfaces/list/list.vue
index f8db6fd156..18247515b6 100644
--- a/app/src/interfaces/list/list.vue
+++ b/app/src/interfaces/list/list.vue
@@ -215,30 +215,30 @@ function closeDrawer() {
 			<p>{{ t('interfaces.list.incompatible_data') }}</p>
 		</v-notice>
 
-		<v-list v-if="Array.isArray(internalValue) && internalValue.length > 0">
-			<draggable
-				:disabled="disabled"
-				:model-value="internalValue"
-				item-key="id"
-				handle=".drag-handle"
-				v-bind="{ 'force-fallback': true }"
-				@update:model-value="$emit('input', $event)"
-			>
-				<template #item="{ element, index }">
-					<v-list-item :dense="internalValue.length > 4" block @click="openItem(index)">
-						<v-icon v-if="!disabled && !sort" name="drag_handle" class="drag-handle" left @click.stop="() => {}" />
-						<render-template
-							:fields="fields"
-							:item="{ ...defaults, ...element }"
-							:direction="direction"
-							:template="templateWithDefaults"
-						/>
-						<div class="spacer" />
-						<v-icon v-if="!disabled" name="close" @click.stop="removeItem(element)" />
-					</v-list-item>
-				</template>
-			</draggable>
-		</v-list>
+		<draggable
+			v-if="Array.isArray(internalValue) && internalValue.length > 0"
+			tag="v-list"
+			:disabled="disabled"
+			:model-value="internalValue"
+			item-key="id"
+			handle=".drag-handle"
+			v-bind="{ 'force-fallback': true }"
+			@update:model-value="$emit('input', $event)"
+		>
+			<template #item="{ element, index }">
+				<v-list-item :dense="internalValue.length > 4" block @click="openItem(index)">
+					<v-icon v-if="!disabled && !sort" name="drag_handle" class="drag-handle" left @click.stop="() => {}" />
+					<render-template
+						:fields="fields"
+						:item="{ ...defaults, ...element }"
+						:direction="direction"
+						:template="templateWithDefaults"
+					/>
+					<div class="spacer" />
+					<v-icon v-if="!disabled" name="close" @click.stop="removeItem(element)" />
+				</v-list-item>
+			</template>
+		</draggable>
 		<v-button v-if="showAddNew" class="add-new" @click="addNew">
 			{{ addLabel }}
 		</v-button>
diff --git a/app/src/modules/settings/routes/data-model/collections/collections.vue b/app/src/modules/settings/routes/data-model/collections/collections.vue
index 18596744bb..e78d3ec1b5 100644
--- a/app/src/modules/settings/routes/data-model/collections/collections.vue
+++ b/app/src/modules/settings/routes/data-model/collections/collections.vue
@@ -204,31 +204,29 @@ async function onSort(updates: Collection[], removeGroup = false) {
 						<button @click="collapseAll">{{ t('none') }}</button>
 					</div>
 				</transition-expand>
-
-				<v-list class="draggable-list">
-					<draggable
-						:model-value="rootCollections"
-						:group="{ name: 'collections' }"
-						:swap-threshold="0.3"
-						class="root-drag-container"
-						item-key="collection"
-						handle=".drag-handle"
-						v-bind="{ 'force-fallback': true }"
-						@update:model-value="onSort($event, true)"
-					>
-						<template #item="{ element }">
-							<collection-item
-								:collection="element"
-								:collections="collections"
-								:is-collapsed="element.isCollapsed"
-								:visibility-tree="findVisibilityChild(element.collection)!"
-								@edit-collection="editCollection = $event"
-								@set-nested-sort="onSort"
-								@toggle-collapse="toggleCollapse"
-							/>
-						</template>
-					</draggable>
-				</v-list>
+				<draggable
+					tag="v-list"
+					:model-value="rootCollections"
+					:group="{ name: 'collections' }"
+					:swap-threshold="0.3"
+					class="root-drag-container draggable-list"
+					item-key="collection"
+					handle=".drag-handle"
+					v-bind="{ 'force-fallback': true }"
+					@update:model-value="onSort($event, true)"
+				>
+					<template #item="{ element }">
+						<collection-item
+							:collection="element"
+							:collections="collections"
+							:is-collapsed="element.isCollapsed"
+							:visibility-tree="findVisibilityChild(element.collection)!"
+							@edit-collection="editCollection = $event"
+							@set-nested-sort="onSort"
+							@toggle-collapse="toggleCollapse"
+						/>
+					</template>
+				</draggable>
 			</template>
 
 			<v-list class="db-only">