Merge pull request #5272 from pavinduLakshan/fix_autofill_prevent_sub…

…mit_issue
wso2 · Jan 21, 2024 · 9401438 · 9401438
2 parents 73ced25 + 99a993a
commit 9401438
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 36 deletions.
diff --git a/.changeset/fast-stingrays-roll.md b/.changeset/fast-stingrays-roll.md
@@ -0,0 +1,8 @@
+---
+"@wso2is/forms": patch
+"@wso2is/console": patch
+"@wso2is/myaccount": patch
+"@wso2is/common": patch
+---
+
+Fix form autofill preventing form submission
diff --git a/modules/forms/src/forms.tsx b/modules/forms/src/forms.tsx
@@ -85,8 +85,6 @@ export const Forms: React.FunctionComponent<React.PropsWithChildren<FormPropsInt
 
         const initialValues = useRef(new Map<string, FormValue>());
 
-        // This specifies if a form field is currently validating or not.
-        const [ isValidating, setIsValidating ] = useState(false);
         const isValidatingRef = useRef(false);
 
         // This holds all the form field components
@@ -279,14 +277,12 @@ export const Forms: React.FunctionComponent<React.PropsWithChildren<FormPropsInt
             isValidatingRef.current = true;
             tempModifyingFields.set(name, false);
             tempTouchedFields.set(name, true);
-            setIsValidating(true);
             setTouchedFields(tempTouchedFields);
             await validate(name, tempRequiredFields, tempValidFields);
 
             validFieldsRef.current = new Map(tempValidFields);
             requiredFieldsRef.current = new Map(tempRequiredFields);
             isValidatingRef.current = false;
-            setIsValidating(false);
 
             setValidFields(tempValidFields);
             setRequiredFields(tempRequiredFields);
@@ -467,39 +463,38 @@ export const Forms: React.FunctionComponent<React.PropsWithChildren<FormPropsInt
             locked = false;
         };
 
-        /**
-         * Checks if all the required fields are filled
-         */
-        const checkRequiredFieldsFilled = (): boolean => {
-            let requiredFilled = true;
+        useEffect(() => {
+            if (startSubmission) {
+                const requiredFields = new Map(requiredFieldsRef.current);
+                const validFields = new Map(validFieldsRef.current);
 
-            requiredFieldsRef.current.forEach((requiredFieldParam) => {
-                if (!requiredFieldParam) {
-                    requiredFilled = false;
-                }
-            });
+                isValidatingRef.current = true;
 
-            return requiredFilled;
-        };
+                form.forEach(async (_value, name) => {
+                    await validate(name, requiredFields, validFields);
+                });
 
-        /**
-         * Checks if all the fields are validated
-         */
-        const checkValidated = (): boolean => {
-            let isValidated = true;
+                isValidatingRef.current = false;
 
-            validFieldsRef.current.forEach((validField) => {
-                if (!validField.isValid) {
-                    isValidated = false;
-                }
-            });
+                // Check whether all required fields are filled.
+                let areAllRequiredFieldsFilled = true;
 
-            return isValidated;
-        };
+                requiredFields.forEach((requiredFieldParam) => {
+                    if (!requiredFieldParam) {
+                        areAllRequiredFieldsFilled = false;
+                    }
+                });
 
-        useEffect(() => {
-            if (startSubmission && !isValidatingRef.current) {
-                if (checkRequiredFieldsFilled() && checkValidated()) {
+                // Check whether all fields contain valid inputs.
+                let areAllFieldsValid = true;
+
+                validFields.forEach((validField) => {
+                    if (!validField.isValid) {
+                        areAllFieldsValid = false;
+                    }
+                });
+
+                if (areAllRequiredFieldsFilled && areAllFieldsValid) {
                     setStartSubmission(false);
                     setIsSubmitting(false);
                     onSubmit && onSubmit(form);
@@ -508,12 +503,8 @@ export const Forms: React.FunctionComponent<React.PropsWithChildren<FormPropsInt
                     setIsSubmitting(true);
                     setStartSubmission(false);
                 }
-            } else {
-                if (startSubmission) {
-                    setIsSubmitting(true);
-                }
             }
-        }, [ startSubmission, isValidating ]);
+        }, [ startSubmission ]);
 
         /**
          * This validates the form and calls the `onSubmit` prop function