FDS-665 validation rules logic updated (#266)

packages/flow-form-builder/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.4.1] - 2024-04-22
+
+### Bug Fixes
+
+- Validation rules are triggered multiple times when multiple fields utilize the `showWhen` property.
+
 ## [2.4.0] - 2024-03-27
 
 ### Features

packages/flow-form-builder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-form-builder",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "Form builder for the flow design system",
   "module": "dist/flow-form-builder.es.js",
   "main": "dist/flow-form-builder.cjs.js",

packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts

@@ -22,7 +22,7 @@ import { FDiv, FRoot } from "@ollion/flow-core";
 import { Ref, createRef } from "lit/directives/ref.js";
 import fieldRenderer from "./fields";
 import { extractValidationState, validateField } from "../../modules/validation/validator";
-
+import { debounce } from "lodash-es";
 import { Subject } from "rxjs";
 import { getEssentialFlowCoreStyles, propogateProperties } from "../../modules/helpers";
 import { cloneDeep, isEqual } from "lodash-es";
@@ -122,11 +122,14 @@ export class FFormBuilder extends FRoot {
 	 */
 	render() {
 		return html`
+			<!--debounce added to reduce multiple calls while multiple showWhen executed
+			It will not affect functionality as such we are just updating silent validation state in single call
+			-->
 			<f-form
 				name=${this.name}
 				@submit=${this.onSubmit}
 				@show-when=${this.onShowWhen}
-				@show-when-exe=${this.onShowWhenExecution}
+				@show-when-exe=${debounce(this.onShowWhenExecution, 1000)}
 				?separator=${this.separator}
 				gap=${ifDefined(this.gap)}
 				@keyup=${this.handleKeyUp}

packages/flow-form-builder/src/modules/validation/validator.ts

@@ -2,7 +2,6 @@ import {
 	CanValidateFields,
 	FFormInputElements,
 	FormBuilderAsyncValidatorFunction,
-	FormBuilderCustomValidationRule,
 	FormBuilderField,
 	FormBuilderGenericValidationRule,
 	FormBuilderLabel,
@@ -27,10 +26,13 @@ import {
 } from "@ollion/flow-core";
 import defaultValidations from "./default-validations";
 import { render } from "lit-html";
-
+type FormBuilderValidationRuleWithPrivateFields = {
+	_lastValue?: string;
+	_lastResult?: boolean;
+} & FormBuilderGenericValidationRule;
 export default async function validate(
 	value: string,
-	elementRules: FormBuilderValidationRules,
+	elementRules: FormBuilderValidationRuleWithPrivateFields[],
 	name: string,
 	element: FFormInputElements | FInputLight | undefined
 ) {
@@ -39,23 +41,30 @@ export default async function validate(
 	let rule!: FormBuilderGenericValidationRule["name"];
 	if (elementRules) {
 		for (const r of elementRules) {
-			if (r.name !== "custom") {
-				result = rules[r.name](value, r.params);
+			/**
+			 * This will avoid validation rules called multiple time in silent validation
+			 */
+			if (r._lastValue === value && r._lastResult !== undefined) {
+				result = r._lastResult;
 				if (!result) {
 					rule = r.name;
 					message = getValidationMessage(r, { name, value });
 					break;
 				}
 			} else {
-				if (isAsync(r.validate)) {
-					const asyncR = r as {
-						_lastValue?: string;
-						_lastResult?: boolean;
-					} & FormBuilderCustomValidationRule;
-					// this if statement is added to avoid multiple validation calls
-					if (asyncR._lastValue === value && asyncR._lastResult !== undefined) {
-						result = asyncR._lastResult;
-					} else {
+				r._lastValue = value;
+				if (r.name !== "custom") {
+					result = rules[r.name](value, r.params);
+					r._lastResult = result;
+					if (!result) {
+						rule = r.name;
+						message = getValidationMessage(r, { name, value });
+						break;
+					}
+				} else {
+					if (isAsync(r.validate)) {
+						// this if statement is added to avoid multiple validation calls
+
 						if (
 							element instanceof FInput ||
 							element instanceof FInputLight ||
@@ -67,9 +76,9 @@ export default async function validate(
 							element.loading = true;
 						}
 						// holding last value
-						asyncR._lastValue = value;
-						result = await asyncR.validate(value, { ...asyncR.params, element });
-						asyncR._lastResult = result;
+
+						result = await r.validate(value, { ...r.params, element });
+						r._lastResult = result;
 						if (
 							element instanceof FInput ||
 							element instanceof FInputLight ||
@@ -80,14 +89,15 @@ export default async function validate(
 						) {
 							element.loading = false;
 						}
+					} else {
+						result = r.validate(value, { ...r.params, element }) as boolean;
+						r._lastResult = result;
+					}
+					if (!result) {
+						rule = r.name;
+						message = getValidationMessage(r, { name, value });
+						break;
 					}
-				} else {
-					result = r.validate(value, { ...r.params, element }) as boolean;
-				}
-				if (!result) {
-					rule = r.name;
-					message = getValidationMessage(r, { name, value });
-					break;
 				}
 			}
 		}