From f63edc266d2df1293d5fa5ce9af03a2c968e017e Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 4 Mar 2021 10:32:41 -0500
Subject: [PATCH] Fix dnd in safari

Fixes #4345
---
 .../components/v-field-select/v-field-select.vue   |  9 ++++++++-
 app/src/components/v-table/v-table.vue             |  1 +
 app/src/interfaces/m2a-builder/m2a-builder.vue     |  1 +
 app/src/interfaces/repeater/repeater.vue           |  1 +
 app/src/layouts/tabular/tabular.vue                | 14 +++++++-------
 .../fields/components/fields-management.vue        |  1 +
 6 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/app/src/components/v-field-select/v-field-select.vue b/app/src/components/v-field-select/v-field-select.vue
index 50f6ad0a85..3fb3df85b7 100644
--- a/app/src/components/v-field-select/v-field-select.vue
+++ b/app/src/components/v-field-select/v-field-select.vue
@@ -3,7 +3,14 @@
 		{{ $t('no_fields_in_collection', { collection: (collectionInfo && collectionInfo.name) || collection }) }}
 	</v-notice>
 
-	<draggable v-else v-model="selectedFields" draggable=".draggable" :set-data="hideDragImage" class="v-field-select">
+	<draggable
+		v-else
+		:force-fallback="true"
+		v-model="selectedFields"
+		draggable=".draggable"
+		:set-data="hideDragImage"
+		class="v-field-select"
+	>
 		<v-chip
 			v-for="(field, index) in selectedFields"
 			:key="index"
diff --git a/app/src/components/v-table/v-table.vue b/app/src/components/v-table/v-table.vue
index 97469d7576..63e2b42557 100644
--- a/app/src/components/v-table/v-table.vue
+++ b/app/src/components/v-table/v-table.vue
@@ -40,6 +40,7 @@
 				</tr>
 			</tbody>
 			<draggable
+				:force-fallback="true"
 				v-else
 				v-model="_items"
 				tag="tbody"
diff --git a/app/src/interfaces/m2a-builder/m2a-builder.vue b/app/src/interfaces/m2a-builder/m2a-builder.vue
index b416c74c20..29e27335f5 100644
--- a/app/src/interfaces/m2a-builder/m2a-builder.vue
+++ b/app/src/interfaces/m2a-builder/m2a-builder.vue
@@ -6,6 +6,7 @@
 
 		<draggable
 			v-else
+			:force-fallback="true"
 			:value="previewValues"
 			handle=".drag-handle"
 			@input="onSort"
diff --git a/app/src/interfaces/repeater/repeater.vue b/app/src/interfaces/repeater/repeater.vue
index 2ccc1e6c79..b8451cb081 100644
--- a/app/src/interfaces/repeater/repeater.vue
+++ b/app/src/interfaces/repeater/repeater.vue
@@ -3,6 +3,7 @@
 		<draggable :value="value" handle=".drag-handle" @input="onSort" :set-data="hideDragImage">
 			<repeater-row
 				v-for="(row, index) in value"
+				:force-fallback="true"
 				:key="index"
 				:value="row"
 				:template="_template"
diff --git a/app/src/layouts/tabular/tabular.vue b/app/src/layouts/tabular/tabular.vue
index b75232ae37..0a84505be4 100644
--- a/app/src/layouts/tabular/tabular.vue
+++ b/app/src/layouts/tabular/tabular.vue
@@ -24,7 +24,7 @@
 
 			<div class="field">
 				<div class="type-label">{{ $t('layouts.tabular.fields') }}</div>
-				<draggable v-model="activeFields" handle=".drag-handle" :set-data="hideDragImage">
+				<draggable v-model="activeFields" handle=".drag-handle" :set-data="hideDragImage" :force-fallback="true">
 					<v-checkbox
 						v-for="field in activeFields"
 						v-model="fields"
@@ -391,6 +391,11 @@ export default defineComponent({
 						fieldsInCollection.value
 							.filter((field) => !!field.meta?.hidden === false)
 							.slice(0, 4)
+							.sort((a?: Field, b?: Field) => {
+								if (a!.field < b!.field) return -1;
+								else if (a!.field > b!.field) return 1;
+								else return 1;
+							})
 							.map(({ field }) => field);
 
 					return fields;
@@ -437,12 +442,7 @@ export default defineComponent({
 				get() {
 					return fields.value
 						.map((key) => fieldsInCollection.value.find((field) => field.field === key))
-						.filter((f) => f)
-						.sort((a?: Field, b?: Field) => {
-							if (a!.field < b!.field) return -1;
-							else if (a!.field > b!.field) return 1;
-							else return 1;
-						}) as Field[];
+						.filter((f) => f) as Field[];
 				},
 				set(val) {
 					fields.value = val.map((field) => field.field);
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 956fed5559..ba51d985bc 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
@@ -7,6 +7,7 @@
 		<draggable
 			class="field-grid"
 			:value="usableFields"
+			:force-fallback="true"
 			handle=".drag-handle"
 			group="fields"
 			:set-data="hideDragImage"