From bc04d767747f39906850efa443a869ccc2020094 Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Fri, 10 Dec 2021 07:17:12 +0800
Subject: [PATCH] fix translations not refreshing on save (#10410)

* fix translations not refreshing on save

* remove unused imports
---
 app/src/interfaces/translations/translations.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/app/src/interfaces/translations/translations.vue b/app/src/interfaces/translations/translations.vue
index bcf646fee4..1ec4202c59 100644
--- a/app/src/interfaces/translations/translations.vue
+++ b/app/src/interfaces/translations/translations.vue
@@ -57,7 +57,7 @@ import { useI18n } from 'vue-i18n';
 import api from '@/api';
 import { useCollection } from '@directus/shared/composables';
 import { unexpectedError } from '@/utils/unexpected-error';
-import { cloneDeep, isEqual, assign, isNil } from 'lodash';
+import { cloneDeep, isEqual, assign } from 'lodash';
 import { notEmpty } from '@/utils/is-empty';
 import { useWindowSize } from '@/composables/use-window-size';
 import useRelation from '@/composables/use-m2m';
@@ -278,6 +278,7 @@ export default defineComponent({
 			const items = ref<Record<string, any>[]>([]);
 			const loading = ref(false);
 			const error = ref(null);
+			const isUndo = ref(false);
 
 			const firstItem = computed(() => getEditedValue(firstLang));
 			const secondItem = computed(() => getEditedValue(secondLang));
@@ -290,8 +291,9 @@ export default defineComponent({
 				(newVal, oldVal) => {
 					if (
 						newVal &&
-						isNil(newVal) !== isNil(oldVal) &&
-						newVal?.every((item) => typeof item === 'string' || typeof item === 'number')
+						!isEqual(newVal, oldVal) &&
+						newVal.every((item) => typeof item === 'string' || typeof item === 'number') &&
+						isUndo.value === false
 					) {
 						loadItems();
 					}
@@ -383,9 +385,11 @@ export default defineComponent({
 
 				if (!pkField || !langField) return;
 
+				isUndo.value = false;
+
 				let copyValue = cloneDeep(value.value ?? []);
 
-				if (pkField in values === false) {
+				if (pkField in values === false && langField in values === false) {
 					const newIndex = copyValue.findIndex((item) => typeof item === 'object' && item[langField] === lang);
 
 					if (newIndex !== -1) {
@@ -413,6 +417,7 @@ export default defineComponent({
 						} else {
 							if (values[pkField] === item[pkField]) {
 								if (isEqual(initialValues, { ...initialValues, ...values })) {
+									isUndo.value = true;
 									return values[pkField];
 								} else {
 									return values;