Disable submit button when submitting

src/@episerver/forms-react/src/components/FormBody.tsx

@@ -68,38 +68,38 @@ export const FormBody = (props: FormBodyProps) => {
             isProgressiveSubmit.current = true;
         }
 
-        isFormFinalized.current = submitButton?.properties?.finalizeForm || formContext?.currentStepIndex === form.steps.length - 1;
-
         //remove submissions of inactive elements and submissions with undefined value
         let formSubmissions = (formContext?.formSubmissions ?? [])
                                 //only post value of active elements
                                 .filter(fs => !isInArray(fs.elementKey, formContext?.dependencyInactiveElements ?? []) && !isNull(fs.value));
 
         //validate all submission data before submit
         let formValidationResults = formSubmitter.doValidate(formSubmissions);
-        dispatchFunctions.dispatchUpdateAllValidation(formValidationResults);
+        dispatchFunctions.updateAllValidation(formValidationResults);
 
         //set focus on the 1st invalid element of current step
         let invalid = formValidationResults.filter(fv => 
                 fv.results.some(r => !r.valid) &&    
                 form.steps[currentStepIndex]?.elements?.some(e => equals(e.key, fv.elementKey))
             )[0]?.elementKey;
         if(!isNullOrEmpty(invalid)){
-            dispatchFunctions.dispatchFocusOn(invalid);
+            dispatchFunctions.updateFocusOn(invalid);
             isFormFinalized.current = false;
             return;
         }
 
         let model: FormSubmitModel = {
             formKey: form.key,
             locale: form.locale,
-            isFinalized: isFormFinalized.current,
+            isFinalized: submitButton?.properties?.finalizeForm || formContext?.currentStepIndex === form.steps.length - 1,
             partialSubmissionKey: formContext?.submissionKey ?? "",
             hostedPageUrl: window.location.pathname,
             submissionData: formSubmissions,
             accessToken: formContext?.identityInfo?.accessToken
         }
 
+        dispatchFunctions.updateIsSubmitting(true);
+
         formSubmitter.doSubmit(model).then((response: FormSubmitResult)=>{
             if(response.success){
                 message.current = response.messages.map(m => m.message).join("<br>");
@@ -111,12 +111,13 @@ export const FormBody = (props: FormBodyProps) => {
             }
             validateFail.current = response.validationFail;
             isFormFinalized.current = isSuccess.current = response.success;
-            dispatchFunctions.dispatchUpdateSubmissionKey(response.submissionKey);
+            dispatchFunctions.updateSubmissionKey(response.submissionKey);
+            dispatchFunctions.updateIsSubmitting(false);
         });
     }
 
     useEffect(()=>{
-        dispatchFunctions.dispatchUpdateIdentity(props.identityInfo);
+        dispatchFunctions.updateIdentity(props.identityInfo);
         if(isNullOrEmpty(props.identityInfo?.accessToken) && !form.properties.allowAnonymousSubmission){
             statusDisplay.current = "Form__Warning__Message";
             statusMessage.current = "You must be logged in to submit this form. If you are logged in and still cannot post, make sure \"Do not track\" in your browser settings is disabled.";

src/@episerver/forms-react/src/components/elements/SubmitButtonElementBlock.tsx

@@ -1,7 +1,6 @@
 import { SubmitButton, isNullOrEmpty } from "@episerver/forms-sdk";
 import React, { useMemo } from "react";
 import { useElement } from "../../hooks/useElement";
-import ElementWrapper from "./shared/ElementWrapper";
 
 interface SubmitButtonElementBlockProps{
     element: SubmitButton
@@ -10,7 +9,7 @@ interface SubmitButtonElementBlockProps{
 export const SubmitButtonElementBlock = (props: SubmitButtonElementBlockProps) => {
     const { element } = props;
     const { elementContext } = useElement(element);
-    const { isVisible, extraAttr, validatorClasses } = elementContext;
+    const { isVisible, extraAttr, validatorClasses, elementRef } = elementContext;
     //TODO: Need to get submittable status from API
     const buttonDisableState = false;
 
@@ -25,6 +24,7 @@ export const SubmitButtonElementBlock = (props: SubmitButtonElementBlockProps) =
                 ? `Form__Element FormExcludeDataRebind FormSubmitButton ${validatorClasses}` 
                 : `Form__Element FormExcludeDataRebind FormSubmitButton FormImageSubmitButton ${validatorClasses}`
             }
+            ref={elementRef}
         >
             {isNullOrEmpty(element.properties.image) ? element.properties.label : (
                 <img src={element.properties.image} alt={element.properties.label} />

src/@episerver/forms-react/src/context/dispatchFunctions.ts

@@ -7,43 +7,43 @@ export class DispatchFunctions {
         this._dispatch = dispatch;
     }
 
-    dispatchUpdateValidation = (elementKey: string, validationResults: ElementValidationResult[]) => {
+    updateValidation = (elementKey: string, validationResults: ElementValidationResult[]) => {
         this._dispatch({
             type: ActionType.UpdateValidation,
             elementKey: elementKey,
             validationResults
         });
     }
 
-    dispatchUpdateAllValidation = (formValidationResults: FormValidationResult[]) => {
+    updateAllValidation = (formValidationResults: FormValidationResult[]) => {
         this._dispatch({
             type: ActionType.UpdateAllValidation,
             formValidationResults
         });
     }
 
-    dispatchUpdateValue = (elementKey: string, value: any) => {
+    updateValue = (elementKey: string, value: any) => {
         this._dispatch({
             type: ActionType.UpdateValue,
             elementKey: elementKey,
             value
         });
     }
 
-    dispatchUpdateDependencies = (dependencyInactiveElements: string[]) => {
+    updateDependencies = (dependencyInactiveElements: string[]) => {
         this._dispatch({
             type: ActionType.UpdateDependencies,
             dependencyInactiveElements
         });
     }
 
-    dispatchResetedForm = () => {
+    resetedForm = () => {
         this._dispatch({
             type: ActionType.ResetedForm
         });
     }
 
-    dispatchResetForm = (formContainer: FormContainer) => {
+    resetForm = (formContainer: FormContainer) => {
         this._dispatch({
             type: ActionType.ResetForm,
             formState: {
@@ -53,31 +53,38 @@ export class DispatchFunctions {
         });
     }
 
-    dispatchFocusOn = (focusOn: string) => {
+    updateFocusOn = (focusOn: string) => {
         this._dispatch({
             type: ActionType.UpdateFocusOn,
             focusOn
         });
     }
 
-    dispatchUpdateIdentity = (identityInfo?: IdentityInfo) => {
+    updateIdentity = (identityInfo?: IdentityInfo) => {
         this._dispatch({
             type: ActionType.UpdateIdentityInfo,
             identityInfo
         });
     }
 
-    dispatchUpdateSubmissionKey = (submissionKey?: string) => {
+    updateSubmissionKey = (submissionKey?: string) => {
         this._dispatch({
             type: ActionType.UpdateSubmissionKey,
             submissionKey
         });
     }
 
-    dispatchUpdateCurrentStepIndex = (currentStepIndex?: number) => {
+    updateCurrentStepIndex = (currentStepIndex?: number) => {
         this._dispatch({
             type: ActionType.UpdateCurrentStepIndex,
             currentStepIndex
         });
     }
+
+    updateIsSubmitting = (isSubmitting?: boolean) => {
+        this._dispatch({
+            type: ActionType.UpdateIsSubmitting,
+            isSubmitting
+        });
+    }
 }

src/@episerver/forms-react/src/context/reducer.ts

@@ -13,7 +13,8 @@ export enum ActionType {
     UpdateFocusOn = "UpdateFocusOn",
     UpdateIdentityInfo = "UpdateIdentityInfo",
     UpdateSubmissionKey = "UpdateSubmissionKey",
-    UpdateCurrentStepIndex = "UpdateCurrentStepIndex"
+    UpdateCurrentStepIndex = "UpdateCurrentStepIndex",
+    UpdateIsSubmitting = "UpdateIsSubmitting"
 }
 
 export function formReducer(formState: FormState, action: any) {
@@ -84,6 +85,12 @@ export function formReducer(formState: FormState, action: any) {
           currentStepIndex: action.currentStepIndex
         } as FormState
       }
+      case ActionType.UpdateIsSubmitting: {
+        return {
+          ...formState,
+          isSubmitting: action.isSubmitting
+        } as FormState
+      }
       default: {
         return formState;
       }

src/@episerver/forms-react/src/hooks/useElement.ts

@@ -72,7 +72,7 @@ export const useElement = (element: FormElementBase) => {
     useEffect(()=>{
         if(formContext?.isReset){
             //update form state
-            dispatchFuncs.dispatchResetedForm();
+            dispatchFuncs.resetedForm();
         }
     },[formContext?.isReset]);
 
@@ -103,18 +103,25 @@ export const useElement = (element: FormElementBase) => {
         else {
             !isInArray(element.key, inactives) && inactives.push(element.key);
         }
-        dispatchFuncs.dispatchUpdateDependencies(inactives);
+        dispatchFuncs.updateDependencies(inactives);
     },[formContext?.formSubmissions]);
 
     //focus on element if validate fail before submitting
     useEffect(()=>{
         let focusOn = formContext?.focusOn ?? "";
         if(equals(focusOn, element.key)){
             elementRef.current && elementRef.current.focus();
-            dispatchFuncs.dispatchFocusOn("");
+            dispatchFuncs.updateFocusOn("");
         }
     },[formContext?.focusOn]);
 
+    //disable submit button when form submitting
+    useEffect(()=>{
+        if(equals(element.contentType, "SubmitButtonElementBlock")){
+            elementRef.current.disabled = formContext?.isSubmitting ?? false;
+        }
+    },[formContext?.isSubmitting])
+
     const handleChange = (e: any) => {
         const { name, value: inputValue, type, checked, files } = e.target;
         let submissionValue = inputValue;
@@ -138,23 +145,23 @@ export const useElement = (element: FormElementBase) => {
         if (/file/.test(type)) {
             submissionValue = files;
             let validationResults = formValidation.validate(files)
-            dispatchFuncs.dispatchUpdateValidation(element.key, validationResults);
+            dispatchFuncs.updateValidation(element.key, validationResults);
         }
 
         //update form context
-        dispatchFuncs.dispatchUpdateValue(element.key, submissionValue);
+        dispatchFuncs.updateValue(element.key, submissionValue);
     }
 
     const handleBlur = (e: any) => {
         //call validation from form-sdk
         let validationResults = formValidation.validate(value);
 
         //update form context
-        dispatchFuncs.dispatchUpdateValidation(element.key, validationResults);
+        dispatchFuncs.updateValidation(element.key, validationResults);
     }
 
     const handleReset = () => {
-        dispatchFuncs.dispatchResetForm(formContext?.formContainer ?? {} as FormContainer);
+        dispatchFuncs.resetForm(formContext?.formContainer ?? {} as FormContainer);
     }
 
     return { 

src/@episerver/forms-sdk/src/models/states/FormState.ts

@@ -18,4 +18,5 @@ export interface FormState {
     identityInfo?: IdentityInfo
     submissionKey?: string
     currentStepIndex: number
+    isSubmitting?: boolean
 }