From a0f23d74c45038e11745146a92701a58d2b8e267 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 17 Jun 2021 16:42:18 -0400
Subject: [PATCH] Reset field value on collection change

---
 .../_system/system-field/system-field.vue         | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/src/interfaces/_system/system-field/system-field.vue b/app/src/interfaces/_system/system-field/system-field.vue
index ed8f95819d..679bb49434 100644
--- a/app/src/interfaces/_system/system-field/system-field.vue
+++ b/app/src/interfaces/_system/system-field/system-field.vue
@@ -18,7 +18,7 @@
 
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
-import { defineComponent, computed, inject, ref, PropType } from 'vue';
+import { defineComponent, computed, inject, ref, PropType, watch } from 'vue';
 import { useFieldsStore } from '@/stores';
 import { Field } from '@/types';
 
@@ -58,16 +58,25 @@ export default defineComponent({
 			default: false,
 		},
 	},
-	setup(props) {
+	setup(props, { emit }) {
 		const { t } = useI18n();
 
 		const fieldsStore = useFieldsStore();
 
 		const values = inject('values', ref<Record<string, any>>({}));
 
+		const collection = computed(() => values.value[props.collectionField] || props.collection);
+
 		const fields = computed(() => {
 			if (!props.collectionField && !props.collection) return [];
-			return fieldsStore.getFieldsForCollection(values.value[props.collectionField] || props.collection);
+			return fieldsStore.getFieldsForCollection(collection.value);
+		});
+
+		// Reset value whenever the chosen collection changes
+		watch(collection, (newCol, oldCol) => {
+			if (oldCol !== null && newCol !== oldCol) {
+				emit('input', null);
+			}
 		});
 
 		const selectItems = computed(() =>