Fix boolean attributes for draggable component (#20760)

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>

.changeset/hot-clouds-protect.md

@@ -0,0 +1,5 @@
+---
+'@directus/app': patch
+---
+
+Fixed drag and drop issues with sortable components in Safari

app/src/components/v-table/table-header.vue

@@ -176,7 +176,6 @@ function toggleManualSort() {
 	<thead class="table-header" :class="{ resizing, reordering }">
 		<draggable
 			v-model="headersWritable"
-			force-fallback
 			:class="{ fixed }"
 			item-key="value"
 			tag="tr"
@@ -186,6 +185,7 @@ function toggleManualSort() {
 			animation="150"
 			ghost-class="header-order-ghost"
 			swap-threshold="0.5"
+			v-bind="{ 'force-fallback': true }"
 			@start="$emit('update:reordering', true)"
 			@end="$emit('update:reordering', false)"
 		>

app/src/components/v-table/v-table.vue

@@ -302,12 +302,12 @@ function updateSort(newSort: Sort) {
 			<draggable
 				v-else
 				v-model="internalItems"
-				force-fallback
 				:item-key="itemKey"
 				tag="tbody"
 				handle=".drag-handle"
 				:disabled="disabled || internalSort.by !== manualSortKey"
 				:set-data="hideDragImage"
+				v-bind="{ 'force-fallback': true }"
 				@end="onSortChange"
 			>
 				<template #item="{ element }">

app/src/interfaces/_system/system-fields/system-fields.vue

@@ -96,7 +96,7 @@ const removeField = (field: string) => {
 			<v-notice class="no-fields">{{ t('interfaces.system-fields.no_fields') }}</v-notice>
 		</v-list>
 		<v-list v-else>
-			<draggable v-model="fields" force-fallback item-key="key" handle=".drag-handle">
+			<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 />

app/src/interfaces/_system/system-filter/nodes.vue

@@ -279,7 +279,7 @@ function isExistingField(node: Record<string, any>): boolean {
 		:group="{ name: 'g1' }"
 		:item-key="getIndex"
 		:swap-threshold="0.3"
-		force-fallback
+		v-bind="{ 'force-fallback': true }"
 		@change="$emit('change')"
 	>
 		<template #item="{ element, index }">

app/src/interfaces/_system/system-modules/system-modules.vue

@@ -213,11 +213,11 @@ function remove(id: string) {
 		<v-list class="list">
 			<draggable
 				v-model="valuesWithData"
-				force-fallback
 				:set-data="hideDragImage"
 				item-key="id"
 				handle=".drag-handle"
 				:animation="150"
+				v-bind="{ 'force-fallback': true }"
 			>
 				<template #item="{ element }">
 					<v-list-item

app/src/interfaces/files/files.vue

@@ -294,11 +294,11 @@ const allowDrag = computed(
 
 		<v-list v-else>
 			<draggable
-				force-fallback
 				:model-value="displayItems"
 				item-key="id"
 				handle=".drag-handle"
 				:disabled="!allowDrag"
+				v-bind="{ 'force-fallback': true }"
 				@update:model-value="sortItems($event)"
 			>
 				<template #item="{ element }">

app/src/interfaces/list-m2a/list-m2a.vue

@@ -351,11 +351,11 @@ const allowDrag = computed(
 			<v-notice v-if="displayItems.length === 0">{{ t('no_items') }}</v-notice>
 
 			<draggable
-				force-fallback
 				:model-value="displayItems"
 				item-key="$index"
 				:set-data="hideDragImage"
 				:disabled="!allowDrag"
+				v-bind="{ 'force-fallback': true }"
 				@update:model-value="sortItems"
 			>
 				<template #item="{ element }">

app/src/interfaces/list-m2m/list-m2m.vue

@@ -516,11 +516,11 @@ const { createAllowed, updateAllowed, deleteAllowed, selectAllowed } = useRelati
 
 			<v-list v-else>
 				<draggable
-					force-fallback
 					:model-value="displayItems"
 					item-key="id"
 					handle=".drag-handle"
 					:disabled="!allowDrag"
+					v-bind="{ 'force-fallback': true }"
 					@update:model-value="sortItems($event)"
 				>
 					<template #item="{ element }">

app/src/interfaces/list-o2m-tree-view/nested-draggable.vue

@@ -110,6 +110,7 @@ const dragOptions = {
 	group: 'description',
 	disabled: false,
 	ghostClass: 'ghost',
+	forceFallback: true,
 };
 
 const filteredDisplayItems = computed(() => {
@@ -201,7 +202,6 @@ function stageEdits(item: Record<string, any>) {
 		draggable=".draggable"
 		:set-data="hideDragImage"
 		:disabled="disabled"
-		force-fallback
 		@start="drag = true"
 		@end="drag = false"
 		@change="change($event as ChangeEvent)"

app/src/interfaces/list-o2m/list-o2m.vue

@@ -477,11 +477,11 @@ function getLinkForItem(item: DisplayItem) {
 
 			<v-list v-else>
 				<draggable
-					force-fallback
 					:model-value="displayItems"
 					item-key="id"
 					handle=".drag-handle"
 					:disabled="!allowDrag"
+					v-bind="{ 'force-fallback': true }"
 					@update:model-value="sortItems($event)"
 				>
 					<template #item="{ element }">

app/src/interfaces/list/list.vue

@@ -218,10 +218,10 @@ function closeDrawer() {
 		<v-list v-if="Array.isArray(internalValue) && internalValue.length > 0">
 			<draggable
 				:disabled="disabled"
-				force-fallback
 				:model-value="internalValue"
 				item-key="id"
 				handle=".drag-handle"
+				v-bind="{ 'force-fallback': true }"
 				@update:model-value="$emit('input', $event)"
 			>
 				<template #item="{ element, index }">

app/src/modules/settings/routes/data-model/collections/collections.vue

@@ -199,13 +199,13 @@ async function onSort(updates: Collection[], removeGroup = false) {
 
 			<v-list v-else class="draggable-list">
 				<draggable
-					force-fallback
 					: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 }">

app/src/modules/settings/routes/data-model/collections/components/collection-item.vue

@@ -86,13 +86,13 @@ function onGroupSortChange(collections: Collection[]) {
 		<transition-expand class="collection-items">
 			<draggable
 				v-if="isCollectionExpanded"
-				force-fallback
 				:model-value="nestedCollections"
 				:group="{ name: 'collections' }"
 				:swap-threshold="0.3"
 				class="drag-container"
 				item-key="collection"
 				handle=".drag-handle"
+				v-bind="{ 'force-fallback': true }"
 				@update:model-value="onGroupSortChange"
 			>
 				<template #item="{ element }">

app/src/modules/settings/routes/data-model/fields/components/field-select.vue

@@ -186,14 +186,12 @@ async function onGroupSortChange(fields: Field[]) {
 				v-if="localType === 'group'"
 				class="field-grid group full nested"
 				:model-value="nestedFields"
-				force-fallback
 				handle=".drag-handle"
 				:group="{ name: 'fields' }"
 				:set-data="hideDragImage"
 				:animation="150"
 				item-key="field"
-				fallback-on-body
-				invert-swap
+				v-bind="{ 'force-fallback': true, 'fallback-on-body': true, 'invert-swap': true }"
 				@update:model-value="onGroupSortChange"
 			>
 				<template #header>

app/src/modules/settings/routes/data-model/fields/components/fields-management.vue

@@ -125,14 +125,12 @@ async function setNestedSort(updates?: Field[]) {
 		<draggable
 			class="field-grid"
 			:model-value="usableFields.filter((field) => isNil(field?.meta?.group))"
-			force-fallback
 			handle=".drag-handle"
 			:group="{ name: 'fields' }"
 			:set-data="hideDragImage"
 			item-key="field"
 			:animation="150"
-			fallback-on-body
-			invert-swap
+			v-bind="{ 'force-fallback': true, 'fallback-on-body': true, 'invert-swap': true }"
 			@update:model-value="setSort"
 		>
 			<template #item="{ element }">