From f02b0f430ba0e163c5795f1d51ad4523b1a3a839 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= <jarda.kotesovec@gmail.com>
Date: Thu, 6 Jun 2024 16:54:06 +0200
Subject: [PATCH 1/4] pkp/pkp-lib#9996 Remove error for input that gets hidden

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

diff --git a/src/components/Form/Form.vue b/src/components/Form/Form.vue
index 52d5e0070..f3b97a4aa 100644
--- a/src/components/Form/Form.vue
+++ b/src/components/Form/Form.vue
@@ -74,6 +74,9 @@ 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/fields/FieldBase.vue b/src/components/Form/fields/FieldBase.vue
index 2b76ad80a..25f472470 100644
--- a/src/components/Form/fields/FieldBase.vue
+++ b/src/components/Form/fields/FieldBase.vue
@@ -14,6 +14,7 @@ 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,
@@ -255,6 +256,9 @@ export default {
 			});
 		},
 	},
+	beforeUnmount() {
+		this.removeError(this.name, this.localeKey);
+	},
 	methods: {
 		/**
 		 * Helper function to compile unique IDs for labels and aria-describedby

From 540f397c3e7389c0e4485af67cffb967169658e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= <jarda.kotesovec@gmail.com>
Date: Thu, 6 Jun 2024 17:29:25 +0200
Subject: [PATCH 2/4] pkp/pkp-lib#9996 check only visible fields for required

---
 src/components/Form/Form.vue       |  6 +++-
 src/components/Form/FormGroup.vue  | 30 +++---------------
 src/components/Form/FormPage.vue   | 29 ++---------------
 src/components/Form/formHelpers.js | 50 ++++++++++++++++++++++++++++++
 4 files changed, 63 insertions(+), 52 deletions(-)
 create mode 100644 src/components/Form/formHelpers.js

diff --git a/src/components/Form/Form.vue b/src/components/Form/Form.vue
index f3b97a4aa..7c0c60694 100644
--- a/src/components/Form/Form.vue
+++ b/src/components/Form/Form.vue
@@ -67,6 +67,7 @@
 <script>
 import FormLocales from './FormLocales.vue';
 import FormPage from './FormPage.vue';
+import {shouldShowField} from './formHelpers';
 
 export default {
 	name: 'PkpForm',
@@ -335,7 +336,10 @@ export default {
 		validateRequired() {
 			let errors = {};
 			this.fields.forEach((field) => {
-				if (!field.isRequired) {
+				if (
+					!field.isRequired ||
+					!shouldShowField(field, this.fields, this.groups)
+				) {
 					return;
 				}
 				let missingValue = false;
diff --git a/src/components/Form/FormGroup.vue b/src/components/Form/FormGroup.vue
index abc2fcedb..63c21039c 100644
--- a/src/components/Form/FormGroup.vue
+++ b/src/components/Form/FormGroup.vue
@@ -78,6 +78,8 @@ import FieldUpload from './fields/FieldUpload.vue';
 import FieldSlider from './fields/FieldSlider.vue';
 import FieldUploadImage from './fields/FieldUploadImage.vue';
 
+import {shouldShowFieldWithinGroup} from './formHelpers';
+
 export default {
 	name: 'FormGroup',
 	components: {
@@ -127,7 +129,9 @@ export default {
 		 */
 		fieldsInGroup() {
 			return this.fields.filter(
-				(field) => field.groupId === this.id && this.shouldShowField(field),
+				(field) =>
+					field.groupId === this.id &&
+					shouldShowFieldWithinGroup(field, this.fields),
 			);
 		},
 
@@ -153,30 +157,6 @@ export default {
 			this.$emit('change', name, prop, value, localeKey);
 		},
 
-		/**
-		 * Should a field be shown?
-		 *
-		 * @param {Object} field One of this.fields
-		 * @return {Boolean}
-		 */
-		shouldShowField: function (field) {
-			if (typeof field.showWhen === 'undefined') {
-				return true;
-			}
-			const whenFieldName =
-				typeof field.showWhen === 'string' ? field.showWhen : field.showWhen[0];
-			const whenField = this.fields.find(
-				(field) => field.name === whenFieldName,
-			);
-			if (!whenField) {
-				return false;
-			}
-			if (typeof field.showWhen === 'string') {
-				return !!whenField.value;
-			}
-			return whenField.value === field.showWhen[1];
-		},
-
 		/**
 		 * Respond to a field changing its errors
 		 *
diff --git a/src/components/Form/FormPage.vue b/src/components/Form/FormPage.vue
index 66dd656b8..3ed005316 100644
--- a/src/components/Form/FormPage.vue
+++ b/src/components/Form/FormPage.vue
@@ -63,7 +63,7 @@
 import ButtonRow from '@/components/ButtonRow/ButtonRow.vue';
 import FormErrors from '@/components/Form/FormErrors.vue';
 import FormGroup from '@/components/Form/FormGroup.vue';
-
+import {shouldShowGroup} from './formHelpers';
 export default {
 	name: 'FormPage',
 	components: {
@@ -107,7 +107,8 @@ export default {
 		 */
 		groupsInPage() {
 			return this.groups.filter(
-				(group) => group.pageId === this.id && this.shouldShowGroup(group),
+				(group) =>
+					group.pageId === this.id && shouldShowGroup(group, this.fields),
 			);
 		},
 
@@ -186,30 +187,6 @@ export default {
 			this.$emit('showLocale', localeKey);
 		},
 
-		/**
-		 * Should a group be shown?
-		 *
-		 * @param {Object} group One of this.groups
-		 * @return {Boolean}
-		 */
-		shouldShowGroup: function (group) {
-			if (typeof group.showWhen === 'undefined') {
-				return true;
-			}
-			const whenFieldName =
-				typeof group.showWhen === 'string' ? group.showWhen : group.showWhen[0];
-			const whenField = this.fields.find(
-				(field) => field.name === whenFieldName,
-			);
-			if (!whenField) {
-				return false;
-			}
-			if (typeof group.showWhen === 'string') {
-				return !!whenField.value;
-			}
-			return whenField.value === group.showWhen[1];
-		},
-
 		/**
 		 * Pass an event up to the form to set the errors object
 		 *
diff --git a/src/components/Form/formHelpers.js b/src/components/Form/formHelpers.js
new file mode 100644
index 000000000..e11454bfa
--- /dev/null
+++ b/src/components/Form/formHelpers.js
@@ -0,0 +1,50 @@
+/**
+ * Should a field be shown?
+ *
+ * @param {Object} field One of this.fields
+ * @return {Boolean}
+ */
+export function shouldShowFieldWithinGroup(field, allFields) {
+	if (typeof field.showWhen === 'undefined') {
+		return true;
+	}
+	const whenFieldName =
+		typeof field.showWhen === 'string' ? field.showWhen : field.showWhen[0];
+	const whenField = allFields.find((field) => field.name === whenFieldName);
+	if (!whenField) {
+		return false;
+	}
+	if (typeof field.showWhen === 'string') {
+		return !!whenField.value;
+	}
+	return whenField.value === field.showWhen[1];
+}
+/**
+ * Should a group be shown?
+ *
+ * @param {Object} group One of this.groups
+ * @return {Boolean}
+ */
+export function shouldShowGroup(group, fields) {
+	if (typeof group.showWhen === 'undefined') {
+		return true;
+	}
+	const whenFieldName =
+		typeof group.showWhen === 'string' ? group.showWhen : group.showWhen[0];
+	const whenField = fields.find((field) => field.name === whenFieldName);
+	if (!whenField) {
+		return false;
+	}
+	if (typeof group.showWhen === 'string') {
+		return !!whenField.value;
+	}
+	return whenField.value === group.showWhen[1];
+}
+
+export function shouldShowField(field, fields, groups) {
+	const group = groups.find((group) => group.id === field.groupId);
+
+	return (
+		shouldShowGroup(group, fields) && shouldShowFieldWithinGroup(field, fields)
+	);
+}

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

From 2be92258e946cb2cd76f0ed34c3788214199fe68 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:39:52 +0200
Subject: [PATCH 4/4] pkp/pkp-lib#9996 add jsdocs

---
 src/components/Form/formHelpers.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/Form/formHelpers.js b/src/components/Form/formHelpers.js
index e11454bfa..5f27683e3 100644
--- a/src/components/Form/formHelpers.js
+++ b/src/components/Form/formHelpers.js
@@ -41,6 +41,15 @@ export function shouldShowGroup(group, fields) {
 	return whenField.value === group.showWhen[1];
 }
 
+/**
+ * Should a field be shown?
+ *
+ * @param {Object} field One field to check
+ * @param {Object} fields All form fields
+ * @param {Object} groups All form groups
+ * @return {Boolean}
+ */
+
 export function shouldShowField(field, fields, groups) {
 	const group = groups.find((group) => group.id === field.groupId);