pkp/pkp-lib#9996 Handle correctly multiple fields removing error sync…

…hronously

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,

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});
 		},
 	},
 };

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: {
 		/**