Simplify restoring fieldsets visibility

danielcardoso5 · danielcardoso5 · commit b460d84f97a9 · 2025-10-22T12:10:03.000+01:00
diff --git a/v0/src/calculateConditionalProperties.js b/v0/src/calculateConditionalProperties.js
@@ -28,17 +28,23 @@ function isFieldRequired(node, field) {
 /**
  * Loops recursively through fieldset fields and returns an copy version of them
  * where the required property is updated.
+ * Since rebuildFieldset is called within a closure, we pass the current fields as parameter
+ * to restore the computed isVisible property.
  *
  * @param {Array} fields - list of fields of a fieldset
  * @param {Object} property - property that relates with the list of fields
  * @returns {Object}
  */
-function rebuildFieldset(fields, property) {
+function rebuildFieldset(fields, currentFields, property) {
   if (property?.properties) {
-    return fields.map((field) => {
+    return fields.map((field, index) => {
       const propertyConditionals = property.properties[field.name];
+      const isVisible = currentFields[index].isVisible;
       if (!propertyConditionals) {
-        return field;
+        return {
+          ...field,
+          isVisible,
+        };
       }
 
       const newFieldParams = extractParametersFromNode(propertyConditionals);
@@ -47,19 +53,22 @@ function rebuildFieldset(fields, property) {
         return {
           ...field,
           ...newFieldParams,
-          fields: rebuildFieldset(field.fields, propertyConditionals),
+          isVisible,
+          fields: rebuildFieldset(field.fields, currentFields[index].fields, propertyConditionals),
         };
       }
       return {
         ...field,
         ...newFieldParams,
+        isVisible,
         required: isFieldRequired(property, field),
       };
     });
   }
 
-  return fields.map((field) => ({
+  return fields.map((field, index) => ({
     ...field,
+    isVisible: currentFields[index].isVisible,
     required: isFieldRequired(property, field),
   }));
 }
@@ -92,7 +101,7 @@ export function calculateConditionalProperties({ fieldParams, customProperties,
    *
    * @returns {calculateConditionalPropertiesReturn}
    */
-  return ({ isRequired, conditionBranch, formValues }) => {
+  return ({ isRequired, conditionBranch, formValues, currentField }) => {
     // Check if the current field is conditionally declared in the schema
     // console.log('::calc (closure original)', fieldParams.description);
     const conditionalProperty = conditionBranch?.properties?.[fieldParams.name];
@@ -110,7 +119,11 @@ export function calculateConditionalProperties({ fieldParams, customProperties,
       let fieldSetFields;
 
       if (fieldParams.inputType === supportedTypes.FIELDSET) {
-        fieldSetFields = rebuildFieldset(fieldParams.fields, conditionalProperty);
+        fieldSetFields = rebuildFieldset(
+          fieldParams.fields,
+          currentField.fields,
+          conditionalProperty
+        );
         newFieldParams.fields = fieldSetFields;
       }
 
diff --git a/v0/src/helpers.js b/v0/src/helpers.js
@@ -161,7 +161,7 @@ function getPrefillSubFieldValues(field, defaultValues, parentFieldKeyPath) {
       initialValue[field.name] = subFieldValues;
     }
   } else {
-    // getDefaultValues and getPrefillSubFieldValues have a circluar dependency, resulting in one having to be used before defined.
+    // getDefaultValues and getPrefillSubFieldValues have a circular dependency, resulting in one having to be used before defined.
     // As function declarations are hoisted this should not be a problem.
     // eslint-disable-next-line no-use-before-define
 
@@ -213,46 +213,6 @@ export function getPrefillValues(fields, initialValues = {}) {
   return initialValues;
 }
 
-/**
- * Preserves the visibility of nested fields in a fieldset
- * @param {Object} field - field object
- * @param {String} parentPath - path to the parent field
- * @returns {Object} - object with a map of the visibility of the nested fields, e.g. { 'parent.child': true }
- */
-function preserveNestedFieldsVisibility(field, parentPath = '') {
-  return field.fields?.reduce?.((acc, f) => {
-    const path = parentPath ? `${parentPath}.${f.name}` : f.name;
-    if (!isNil(f.isVisible)) {
-      acc[path] = f.isVisible;
-    }
-
-    if (f.fields) {
-      Object.assign(acc, preserveNestedFieldsVisibility(f, path));
-    }
-    return acc;
-  }, {});
-}
-
-/**
- * Restores the visibility of nested fields in a fieldset
- * @param {Object} field - field object
- * @param {Object} nestedFieldsVisibility - object with a map of the visibility of the nested fields, e.g. { 'parent.child': true }
- * @param {String} parentPath - path to the parent field
- */
-function restoreNestedFieldsVisibility(field, nestedFieldsVisibility, parentPath = '') {
-  field.fields.forEach((f) => {
-    const path = parentPath ? `${parentPath}.${f.name}` : f.name;
-    const visibility = get(nestedFieldsVisibility, path);
-    if (!isNil(visibility)) {
-      f.isVisible = visibility;
-    }
-
-    if (f.fields) {
-      restoreNestedFieldsVisibility(f, nestedFieldsVisibility, path);
-    }
-  });
-}
-
 /**
  * Updates field properties based on the current JSON-schema node and the required fields
  *
@@ -283,22 +243,10 @@ function updateField(field, requiredFields, node, formValues, logic, config) {
     field.isVisible = true;
   }
 
-  // Store current visibility of fields within a fieldset before updating its attributes
-  const nestedFieldsVisibility = preserveNestedFieldsVisibility(field);
-
   const updateAttributes = (fieldAttrs) => {
     Object.entries(fieldAttrs).forEach(([key, value]) => {
       field[key] = value;
 
-      // If the field is a fieldset, restore the visibility of the fields within it.
-      // If this is not in place, calling updateField for multiple conditionals touching
-      // the same fieldset will unset previously calculated visibility for the nested fields.
-      // This is because rebuildFieldset is called via the calculateConditionalProperties closure
-      // created at the time of building the fields, and it returns a new fieldset.fields array
-      if (key === 'fields' && !isNil(nestedFieldsVisibility)) {
-        restoreNestedFieldsVisibility(field, nestedFieldsVisibility);
-      }
-
       if (key === 'schema' && typeof value === 'function') {
         // key "schema" refers to YupSchema that needs to be processed for validations.
         field[key] = value();
@@ -347,6 +295,7 @@ function updateField(field, requiredFields, node, formValues, logic, config) {
       isRequired: fieldIsRequired,
       conditionBranch: node,
       formValues,
+      currentField: field,
     });
     updateAttributes(newAttributes);
     removeConditionalStaleAttributes(field, newAttributes, rootFieldAttrs);
@@ -416,7 +365,7 @@ export function processNode({
 
   if (node.if !== undefined) {
     const matchesCondition = checkIfConditionMatchesProperties(node, formValues, formFields, logic);
-    // BUG HERE (unreleated) - what if it matches but doesn't has a then,
+    // BUG HERE (unrelated) - what if it matches but doesn't has a then,
     // it should do nothing, but instead it jumps to node.else when it shouldn't.
     if (matchesCondition && node.then) {
       const { required: branchRequired } = processNode({
@@ -500,14 +449,14 @@ export function processNode({
 function clearValuesIfNotVisible(fields, formValues) {
   fields.forEach(({ isVisible = true, name, inputType, fields: nestedFields }) => {
     if (!isVisible) {
-      // TODO I (Sandrina) think this doesn't work. I didn't find any test covering this scenario. Revisit later.
       formValues[name] = null;
     }
     if (inputType === supportedTypes.FIELDSET && nestedFields && formValues[name]) {
       clearValuesIfNotVisible(nestedFields, formValues[name]);
     }
   });
 }
+
 /**
  * Updates form fields properties based on the current form state and the JSON schema rules
  *
@@ -549,7 +498,7 @@ function getFieldOptions(node, presentation) {
     }));
   }
 
-  /** @deprecated - takes precendence in case a JSON Schema still has deprecated options */
+  /** @deprecated - takes precedence in case a JSON Schema still has deprecated options */
   if (presentation.options) {
     return presentation.options;
   }
diff --git a/v0/src/tests/createHeadlessForm.test.js b/v0/src/tests/createHeadlessForm.test.js
@@ -2307,6 +2307,85 @@ describe('createHeadlessForm', () => {
           ).toBeUndefined();
         });
       });
+
+      describe('supports computed values based on values from nested fieldsets', () => {
+        it("computed value for total_contributions is calculated correctly with defaults when user selects 'yes' for has_retirement_plan", () => {
+          const { fields, handleValidation } = createHeadlessForm(
+            schemaWithNestedFieldsetsConditionals,
+            {}
+          );
+          const validateForm = (vals) => friendlyError(handleValidation(vals));
+
+          expect(
+            validateForm({
+              perks: {
+                benefits_package: 'basic',
+                has_retirement_plan: 'yes',
+                declare_amount: 'no',
+                retirement_plan: {
+                  plan_name: 'test',
+                  create_plan: 'no',
+                },
+              },
+            })
+          ).toEqual({ perks: { retirement_plan: { year: 'Required field' } } });
+
+          expect(getField(fields, 'total_contributions').isVisible).toBe(true);
+          expect(getField(fields, 'total_contributions').default).toBe(0);
+          expect(getField(fields, 'total_contributions').const).toBe(0);
+        });
+
+        it('computed value for total_contributions is calculated correctly based on the selected months', () => {
+          const { fields, handleValidation } = createHeadlessForm(
+            schemaWithNestedFieldsetsConditionals,
+            {}
+          );
+          const validateForm = (vals) => friendlyError(handleValidation(vals));
+
+          expect(
+            validateForm({
+              perks: {
+                benefits_package: 'basic',
+                has_retirement_plan: 'yes',
+                declare_amount: 'no',
+                retirement_plan: {
+                  plan_name: 'test',
+                  year: 2025,
+                  create_plan: 'yes',
+                  planned_contributions: {
+                    months: ['january', 'february', 'march', 'april', 'may'],
+                  },
+                },
+              },
+            })
+          ).toBeUndefined();
+
+          expect(getField(fields, 'total_contributions').isVisible).toBe(true);
+          expect(getField(fields, 'total_contributions').default).toBe(5);
+          expect(getField(fields, 'total_contributions').const).toBe(5);
+
+          expect(
+            validateForm({
+              perks: {
+                benefits_package: 'basic',
+                has_retirement_plan: 'yes',
+                declare_amount: 'no',
+                retirement_plan: {
+                  plan_name: 'test',
+                  year: 2025,
+                  create_plan: 'yes',
+                  planned_contributions: {
+                    months: ['january', 'february', 'march'],
+                  },
+                },
+              },
+            })
+          ).toBeUndefined();
+
+          expect(getField(fields, 'total_contributions').default).toBe(3);
+          expect(getField(fields, 'total_contributions').const).toBe(3);
+        });
+      });
     });
 
     it('support "email" field type', () => {
diff --git a/v0/src/tests/helpers.js b/v0/src/tests/helpers.js
