Merge pull request #162 from episerver/user/thng/AFORM-4452-Cannot-submit-the-forms-having-hidden-element-properly

AFORM-4452: Check satisfiedAction when query inactive elements

Author: thachnd

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

@@ -2,7 +2,8 @@ import React, { useEffect, useRef } from "react";
 import { useForms } from "../context/store";
 import { StepHelper, FormContainer, FormSubmitter, IdentityInfo, isInArray, isNull, 
     isNullOrEmpty, FormSubmitModel, FormSubmitResult, SubmitButton, FormCache, 
-    FormConstants, ProblemDetail, StepDependCondition, getConfirmationData } from "@episerver/forms-sdk";
+    FormConstants, ProblemDetail, StepDependCondition, getConfirmationData, 
+    SatisfiedActionType} from "@episerver/forms-sdk";
 import { RenderElementInStep } from "./RenderElementInStep";
 import { DispatchFunctions } from "../context/dispatchFunctions";
 import { FormStepNavigation } from "./FormStepNavigation";
@@ -102,7 +103,10 @@ export const FormBody = (props: FormBodyProps) => {
 
         //get inactives element
         let inactives = (formContext?.elementDependencies ?? [])
-            .filter(dependency => !dependency.isSatisfied)
+            .filter(dependency =>
+                (!dependency.isSatisfied && dependency.sastisfiedAction === SatisfiedActionType.Show)
+                || (dependency.isSatisfied && dependency.sastisfiedAction === SatisfiedActionType.Hide)
+            )
             .map(dependency => dependency.elementKey);
 
         //filter submissions by active elements and current step

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

@@ -16,11 +16,12 @@ export class DispatchFunctions {
         });
     }
 
-    UpdateElementDependencies = (elementKey: string, condition: boolean) => {
+    UpdateElementDependencies = (elementKey: string, condition: boolean, satisfiedAction: string) => {
         this._dispatch({
             type: ActionType.UpdateElementDependencies,
             elementKey: elementKey,
-            condition
+            condition,
+            satisfiedAction
         });
     }
 

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

@@ -36,7 +36,8 @@ export function formReducer(formState: FormState, action: any) {
             ...formState,
             elementDependencies: formState.elementDependencies.map(fs => equals(fs.elementKey, action.elementKey)  ? { 
                 elementKey: action.elementKey, 
-                isSatisfied: action.condition 
+                isSatisfied: action.condition,
+                sastisfiedAction: action.satisfiedAction
             } as ElementDependencies : fs)
         } as FormState;
       }

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

@@ -107,7 +107,7 @@ export const useElement = (element: FormElementBase) => {
 
         if (currentCondition != checkConditions) {
             // Update element dependencies state
-            dispatchFuncs.UpdateElementDependencies(element.key, checkConditions);
+            dispatchFuncs.UpdateElementDependencies(element.key, checkConditions, conditionProps.satisfiedAction);
         }
 
     }, [formContext?.formSubmissions, formContext?.elementDependencies]);

src/@episerver/forms-sdk/src/helpers/initFormState.ts

@@ -29,7 +29,7 @@ export function initFormState(formContainer: FormContainer, currentPageUrl?: str
                 //init form submission
                 formSubmissions = formSubmissions.concat({ elementKey: e.key, value: getDefaultValue(e) } as FormSubmission);
                 //init form elements dependencies
-                elementDependencies = elementDependencies.concat({ elementKey: e.key, isSatisfied: true });
+                elementDependencies = elementDependencies.concat({ elementKey: e.key, isSatisfied: true, sastisfiedAction : (e.properties as any).satisfiedAction });
             }
         });
         stepDependencies = stepDependencies.concat({ elementKey: s.formStep.key, isSatisfied: false });

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

@@ -1,4 +1,5 @@
 export interface ElementDependencies{
     elementKey: string
     isSatisfied: boolean
+    sastisfiedAction?: string
 }