From 17b7a5340fff2871fcfd3c884af158bd2e6e7afd Mon Sep 17 00:00:00 2001
From: brainslug <tim@brainslug.nl>
Date: Tue, 28 Jun 2022 17:29:58 +0200
Subject: [PATCH] bunch of attempted fixes

---
 app/src/components/v-form/v-form.vue          | 20 ++++++++++++------
 .../group-accordion/group-accordion.vue       | 21 ++++++++++++++++---
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/app/src/components/v-form/v-form.vue b/app/src/components/v-form/v-form.vue
index 9914cef1b8..134784a958 100644
--- a/app/src/components/v-form/v-form.vue
+++ b/app/src/components/v-form/v-form.vue
@@ -24,7 +24,7 @@
 				:field="field"
 				:fields="fieldsForGroup[index] || []"
 				:values="modelValue || {}"
-				:initial-values="initialValues || {}"
+				:initial-values="initialVals"
 				:disabled="disabled"
 				:batch-mode="batchMode"
 				:batch-active-fields="batchActiveFields"
@@ -48,7 +48,7 @@
 				:field="field"
 				:autofocus="index === firstEditableFieldIndex && autofocus"
 				:model-value="(values || {})[field.field]"
-				:initial-value="(initialValues || {})[field.field]"
+				:initial-value="initialVals[field.field]"
 				:disabled="isDisabled(field)"
 				:batch-mode="batchMode"
 				:batch-active="batchActiveFields.includes(field.field)"
@@ -79,7 +79,7 @@ import { applyConditions } from '@/utils/apply-conditions';
 import { extractFieldFromFunction } from '@/utils/extract-field-from-function';
 import { Field, FieldMeta, ValidationError } from '@directus/shared/types';
 import { assign, cloneDeep, isEqual, isNil, omit, pick } from 'lodash';
-import { computed, defineComponent, onBeforeUpdate, PropType, provide, ref, watch, unref } from 'vue';
+import { computed, defineComponent, onBeforeUpdate, PropType, provide, ref, watch, inject } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FormField from './form-field.vue';
 import ValidationErrors from './validation-errors.vue';
@@ -164,8 +164,13 @@ export default defineComponent({
 			throw new Error('[v-form]: You need to pass either the collection or fields prop.');
 		});
 
+		const initialVals = Object.freeze(props.initialValues || {});
+
 		const values = computed(() => {
-			return Object.assign({}, props.initialValues, props.modelValue);
+			if (props.nested) {
+				return inject('values', ref<Record<string, any>>({}));
+			}
+			return Object.assign({}, initialVals, props.modelValue);
 		});
 
 		const el = ref<Element>();
@@ -218,7 +223,9 @@ export default defineComponent({
 			}
 		);
 
-		provide('values', values);
+		if (!props.nested) {
+			provide('values', values);
+		}
 
 		return {
 			t,
@@ -241,6 +248,7 @@ export default defineComponent({
 			scrollToField,
 			formFieldEls,
 			fieldsMeta,
+			initialVals,
 		};
 
 		function useForm() {
@@ -293,7 +301,7 @@ export default defineComponent({
 
 			const { formFields } = useFormFields(fieldsInGroup);
 
-			const fieldsForGroup = computed(() =>
+			const fieldsForGroup = Object.freeze(
 				formFields.value.map((field: Field) => getFieldsForGroup(field.meta?.field || null))
 			);
 
diff --git a/app/src/interfaces/group-accordion/group-accordion.vue b/app/src/interfaces/group-accordion/group-accordion.vue
index 61cf90d7b2..7ca5664e73 100644
--- a/app/src/interfaces/group-accordion/group-accordion.vue
+++ b/app/src/interfaces/group-accordion/group-accordion.vue
@@ -5,7 +5,7 @@
 			:key="accordionField.field"
 			:field="accordionField"
 			:fields="fields"
-			:values="values"
+			:values="internalValues"
 			:initial-values="initialValues"
 			:disabled="disabled"
 			:batch-mode="batchMode"
@@ -27,7 +27,7 @@ import { Field } from '@directus/shared/types';
 import { defineComponent, PropType, computed, ref, watch } from 'vue';
 import { ValidationError } from '@directus/shared/types';
 import AccordionSection from './accordion-section.vue';
-import { isEqual } from 'lodash';
+import { isEqual, pick } from 'lodash';
 
 export default defineComponent({
 	name: 'InterfaceGroupAccordion',
@@ -95,6 +95,7 @@ export default defineComponent({
 		});
 
 		const selection = ref<string[]>([]);
+		const internalValues = ref<Record<string, unknown>>({});
 
 		watch(
 			() => props.start,
@@ -122,7 +123,21 @@ export default defineComponent({
 			}
 		);
 
-		return { rootFields, selection, toggleAll };
+		watch(
+			() => props.values,
+			() => {
+				const newValue = pick(
+					props.values,
+					rootFields.value.map((f) => f.field)
+				);
+				if (!isEqual(newValue, internalValues.value)) {
+					internalValues.value = newValue;
+				}
+			},
+			{ immediate: true }
+		);
+
+		return { rootFields, selection, toggleAll, internalValues };
 
 		function toggleAll() {
 			if (props.accordionMode === true) return;