From b717553de45faae8f97c90281bb0557db43bb632 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= <jarda.kotesovec@gmail.com>
Date: Mon, 10 Jun 2024 08:36:21 +0200
Subject: [PATCH] pkp/pkp-lib#9996 Handle correctly multiple fields removing
 error synchronously

---
 src/components/Form/Form.vue             |  3 ---
 src/components/Form/FormGroup.vue        | 16 ++++++++++++++--
 src/components/Form/fields/FieldBase.vue |  4 ++--
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/Form/Form.vue b/src/components/Form/Form.vue
index 7c0c60694..5e711a144 100644
--- a/src/components/Form/Form.vue
+++ b/src/components/Form/Form.vue
@@ -75,9 +75,6 @@ export default {
 		FormLocales,
 		FormPage,
 	},
-	provide() {
-		return {removeError: this.removeError};
-	},
 	props: {
 		/** Used by a parent component, such as `Container`, to identify events emitted from the form and update the form props when necessary. */
 		id: String,
diff --git a/src/components/Form/FormGroup.vue b/src/components/Form/FormGroup.vue
index 63c21039c..5e3b31974 100644
--- a/src/components/Form/FormGroup.vue
+++ b/src/components/Form/FormGroup.vue
@@ -165,7 +165,19 @@ export default {
 		 * @param {String} localeKey The locale key for a multilingual field
 		 */
 		setFieldErrors: function (name, errors, localeKey = '') {
-			let newErrors = {...this.errors};
+			/**
+			 * Better practice is to make to copy of data, modify it and send it upstream
+			 * But there is challenge with #9996, where each unmounted fields needs to clean up
+			 * its error. And given its happening synchronously, it does not propagate updated errors
+			 * object in between the unmounts. Therefore last operation would override the previous ones.
+			 *
+			 * Changing error object inplace ensures all the updates gets registered.
+			 *
+			 * In future better approach would be to have remove-error event, which defines what to remove
+			 * and would be correctly processed by the state manager
+			 */
+
+			let newErrors = this.errors;
 			if (!errors || !errors.length) {
 				if (localeKey && newErrors[name] && newErrors[name][localeKey]) {
 					delete newErrors[name][localeKey];
@@ -180,7 +192,7 @@ export default {
 					newErrors[name] = errors;
 				}
 			}
-			this.$emit('set-errors', newErrors);
+			this.$emit('set-errors', {...newErrors});
 		},
 	},
 };
diff --git a/src/components/Form/fields/FieldBase.vue b/src/components/Form/fields/FieldBase.vue
index 25f472470..e7714ea37 100644
--- a/src/components/Form/fields/FieldBase.vue
+++ b/src/components/Form/fields/FieldBase.vue
@@ -14,7 +14,6 @@ export default {
 		Tooltip,
 		MultilingualProgress,
 	},
-	inject: ['removeError'],
 	props: {
 		/** The key for this field. Used in the `name` attribute of `<input>`, `<textarea>`, `<select>` and other fields. The form will submit the value for this field under this name, so it must match an accepted value of the API endpoint. */
 		name: String,
@@ -62,6 +61,7 @@ export default {
 	emits: [
 		/** Emitted when a field prop changes. Payload: `(fieldName, propName, newValue, [localeKey])`. The `localeKey` will be null for fields that are not multilingual. This event is fired every time the `value` changes, so you should [debounce](https://www.npmjs.com/package/debounce) event callbacks that contain resource-intensive code. */
 		'change',
+		'set-errors',
 	],
 	computed: {
 		/**
@@ -257,7 +257,7 @@ export default {
 		},
 	},
 	beforeUnmount() {
-		this.removeError(this.name, this.localeKey);
+		this.$emit('set-errors', this.name, [], this.localeKey);
 	},
 	methods: {
 		/**