From 1876fed65c28fd81f1cdccf6ec0c5c234163713c Mon Sep 17 00:00:00 2001
From: ian <licitdev@gmail.com>
Date: Wed, 16 Feb 2022 22:42:43 +0800
Subject: [PATCH] Fix m2o interface display issues (#11567)

* Fix display of newly created entry in nested m2o interface

* Fix display of updated existing m2o entry
---
 .../select-dropdown-m2o.vue                   | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/app/src/interfaces/select-dropdown-m2o/select-dropdown-m2o.vue b/app/src/interfaces/select-dropdown-m2o/select-dropdown-m2o.vue
index 2236e0b5c5..725007f162 100644
--- a/app/src/interfaces/select-dropdown-m2o/select-dropdown-m2o.vue
+++ b/app/src/interfaces/select-dropdown-m2o/select-dropdown-m2o.vue
@@ -211,7 +211,7 @@ export default defineComponent({
 
 			watch(
 				() => props.value,
-				(newValue) => {
+				async (newValue) => {
 					// When the newly configured value is a primitive, assume it's the primary key
 					// of the item and fetch it from the API to render the preview
 					if (
@@ -230,12 +230,17 @@ export default defineComponent({
 
 					// If value is already fullfilled, let's fetch all necessary
 					// fields for display template
-					else if (
-						!currentItem.value &&
-						typeof newValue === 'object' &&
-						newValue[relatedPrimaryKeyField.value!.field]
-					) {
-						fetchCurrent(newValue[relatedPrimaryKeyField.value!.field]);
+					else if (!currentItem.value && typeof newValue === 'object') {
+						if (newValue[relatedPrimaryKeyField.value!.field]) {
+							await fetchCurrent(newValue[relatedPrimaryKeyField.value!.field]);
+							if (currentItem.value) {
+								// Override with locally updated values
+								Object.assign(currentItem.value, newValue);
+							}
+						} else {
+							// Display newly created entry in nested m2o
+							currentItem.value = newValue;
+						}
 					}
 				},
 				{ immediate: true }