From b83d23449cd5d52f4fa8727f69c64f30a8dd4062 Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Sat, 16 Dec 2023 03:03:30 +0800
Subject: [PATCH] Fix boolean attributes for draggable component (#20760)

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>
---
 .changeset/hot-clouds-protect.md                             | 5 +++++
 app/src/components/v-table/table-header.vue                  | 2 +-
 app/src/components/v-table/v-table.vue                       | 2 +-
 app/src/interfaces/_system/system-fields/system-fields.vue   | 2 +-
 app/src/interfaces/_system/system-filter/nodes.vue           | 2 +-
 app/src/interfaces/_system/system-modules/system-modules.vue | 2 +-
 app/src/interfaces/files/files.vue                           | 2 +-
 app/src/interfaces/list-m2a/list-m2a.vue                     | 2 +-
 app/src/interfaces/list-m2m/list-m2m.vue                     | 2 +-
 app/src/interfaces/list-o2m-tree-view/nested-draggable.vue   | 2 +-
 app/src/interfaces/list-o2m/list-o2m.vue                     | 2 +-
 app/src/interfaces/list/list.vue                             | 2 +-
 .../settings/routes/data-model/collections/collections.vue   | 2 +-
 .../data-model/collections/components/collection-item.vue    | 2 +-
 .../routes/data-model/fields/components/field-select.vue     | 4 +---
 .../data-model/fields/components/fields-management.vue       | 4 +---
 16 files changed, 20 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/hot-clouds-protect.md

diff --git a/.changeset/hot-clouds-protect.md b/.changeset/hot-clouds-protect.md
new file mode 100644
index 0000000000..53dc5f77d2
--- /dev/null
+++ b/.changeset/hot-clouds-protect.md
@@ -0,0 +1,5 @@
+---
+'@directus/app': patch
+---
+
+Fixed drag and drop issues with sortable components in Safari
diff --git a/app/src/components/v-table/table-header.vue b/app/src/components/v-table/table-header.vue
index 5d01d1e847..1a337836a9 100644
--- a/app/src/components/v-table/table-header.vue
+++ b/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)"
 		>
diff --git a/app/src/components/v-table/v-table.vue b/app/src/components/v-table/v-table.vue
index 36a8ab2cf0..efc247d9f2 100644
--- a/app/src/components/v-table/v-table.vue
+++ b/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 }">
diff --git a/app/src/interfaces/_system/system-fields/system-fields.vue b/app/src/interfaces/_system/system-fields/system-fields.vue
index 1c636a9cd7..6450c594ad 100644
--- a/app/src/interfaces/_system/system-fields/system-fields.vue
+++ b/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 />
diff --git a/app/src/interfaces/_system/system-filter/nodes.vue b/app/src/interfaces/_system/system-filter/nodes.vue
index b6dd47b699..80dcfe1281 100644
--- a/app/src/interfaces/_system/system-filter/nodes.vue
+++ b/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 }">
diff --git a/app/src/interfaces/_system/system-modules/system-modules.vue b/app/src/interfaces/_system/system-modules/system-modules.vue
index 44e39d2c73..15f85c18e5 100644
--- a/app/src/interfaces/_system/system-modules/system-modules.vue
+++ b/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
diff --git a/app/src/interfaces/files/files.vue b/app/src/interfaces/files/files.vue
index 61974c9149..dd249d7997 100644
--- a/app/src/interfaces/files/files.vue
+++ b/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 }">
diff --git a/app/src/interfaces/list-m2a/list-m2a.vue b/app/src/interfaces/list-m2a/list-m2a.vue
index d8e588f6b9..8abbb6c8e3 100644
--- a/app/src/interfaces/list-m2a/list-m2a.vue
+++ b/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 }">
diff --git a/app/src/interfaces/list-m2m/list-m2m.vue b/app/src/interfaces/list-m2m/list-m2m.vue
index c37d8c2779..5227f46dd3 100644
--- a/app/src/interfaces/list-m2m/list-m2m.vue
+++ b/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 }">
diff --git a/app/src/interfaces/list-o2m-tree-view/nested-draggable.vue b/app/src/interfaces/list-o2m-tree-view/nested-draggable.vue
index baae4e484e..b09e70bbdb 100644
--- a/app/src/interfaces/list-o2m-tree-view/nested-draggable.vue
+++ b/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)"
diff --git a/app/src/interfaces/list-o2m/list-o2m.vue b/app/src/interfaces/list-o2m/list-o2m.vue
index c56be8cade..9d7cd83b0e 100644
--- a/app/src/interfaces/list-o2m/list-o2m.vue
+++ b/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 }">
diff --git a/app/src/interfaces/list/list.vue b/app/src/interfaces/list/list.vue
index 24b89dc023..f8db6fd156 100644
--- a/app/src/interfaces/list/list.vue
+++ b/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 }">
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 a079f0d5d5..67f0b2c4a6 100644
--- a/app/src/modules/settings/routes/data-model/collections/collections.vue
+++ b/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 }">
diff --git a/app/src/modules/settings/routes/data-model/collections/components/collection-item.vue b/app/src/modules/settings/routes/data-model/collections/components/collection-item.vue
index 71fe02e986..434bdf7635 100644
--- a/app/src/modules/settings/routes/data-model/collections/components/collection-item.vue
+++ b/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 }">
diff --git a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
index bf1557ed39..eb4feb043b 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
+++ b/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>
diff --git a/app/src/modules/settings/routes/data-model/fields/components/fields-management.vue b/app/src/modules/settings/routes/data-model/fields/components/fields-management.vue
index 54afdfe394..daa871dfec 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/fields-management.vue
+++ b/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 }">