From f85244348c85c00d7d995f702bae846a1ec173f1 Mon Sep 17 00:00:00 2001
From: "EP\\qang2" <quocanh.nguyen@episerver.com>
Date: Thu, 19 Sep 2024 16:59:12 +0700
Subject: [PATCH] Update hidden element when a condition change Fixes:
 AFORM-4375

---
 .../forms-react/src/hooks/useElement.ts       | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/@episerver/forms-react/src/hooks/useElement.ts b/src/@episerver/forms-react/src/hooks/useElement.ts
index fadfb42..ed6e293 100644
--- a/src/@episerver/forms-react/src/hooks/useElement.ts
+++ b/src/@episerver/forms-react/src/hooks/useElement.ts
@@ -82,13 +82,14 @@ export const useElement = (element: FormElementBase) => {
             //update form state
             dispatchFuncs.resetFormDone();
         }
-    },[formContext?.isReset]);
+    }, [formContext?.isReset]);
 
     //update visible
-    useEffect(()=>{
+    useEffect(() => {
         const conditionProps = (element.properties as unknown) as ConditionProperties;
 
-        if (isNull(conditionProps.satisfiedAction)) {
+        if (isNull(conditionProps.satisfiedAction) || isNull(conditionProps.conditions)) {
+            // No conditions and satisfied actions to take, no need to update dependencies
             return;
         }
 
@@ -102,16 +103,19 @@ export const useElement = (element: FormElementBase) => {
             //if isDependenciesSatisfied = false, and if SatisfiedAction = hide, then show element. otherwise hide element.
             isVisible.current = equals(conditionProps.satisfiedAction, SatisfiedActionType.Hide);
         }
+        var currentCondition = formContext?.elementDependencies.find(e => e.elementKey === element.key)?.isSatisfied;
+        
+        if (currentCondition != checkConditions) {
+            // Update element dependencies state
+            dispatchFuncs.UpdateElementDependencies(element.key, checkConditions);
+        }
 
-        // Update element dependencies state
-        dispatchFuncs.UpdateElementDependencies(element.key,checkConditions);
-
-    },[formContext?.formSubmissions]);
+    }, [formContext?.formSubmissions, formContext?.elementDependencies]);
 
     //focus on element if validate fail before submitting
-    useEffect(()=>{
+    useEffect(() => {
         let focusOn = formContext?.focusOn ?? "";
-        if(equals(focusOn, element.key)){
+        if (equals(focusOn, element.key)) {
             elementRef.current && elementRef.current.focus();
             dispatchFuncs.updateFocusOn("");
         }