@formio/js 5.1.0-dev.6067.676f8e2 → 5.1.0-dev.6068.e295b11

package/lib/cjs/components/_classes/component/Component.d.ts

@@ -165,6 +165,7 @@ declare class Component extends Element {
     get componentsMap(): object;
     parentShouldConditionallyClear(): boolean;
     parentConditionallyHidden(): boolean;
+    parentDefaultHidden(): boolean;
     set data(value: any);
     get data(): any;
     mergeSchema(component?: {}): any;
@@ -228,8 +229,11 @@ declare class Component extends Element {
     get visible(): boolean;
     get logicallyHidden(): any;
     _logicallyHidden: any;
-    shouldConditionallyClear(skipParent?: boolean): boolean;
-    conditionallyHidden(skipParent?: boolean): boolean;
+    shouldConditionallyClearOnPristine(): boolean;
+    shouldConditionallyClear(): boolean;
+    _conditionallyClear: boolean | undefined;
+    conditionallyHidden(): boolean;
+    _conditionallyHidden: boolean | undefined;
     set currentForm(instance: any);
     get currentForm(): any;
     _currentForm: any;

package/lib/cjs/components/_classes/component/Component.js

@@ -461,7 +461,8 @@ class Component extends Element_1.default {
     parentShouldConditionallyClear() {
         let currentParent = this.parent;
         while (currentParent) {
-            if (currentParent.shouldConditionallyClear(true)) {
+            if ((currentParent.allowData && currentParent._conditionallyClear) ||
+                (!currentParent.allowData && currentParent._conditionallyHidden)) {
                 return true;
             }
             currentParent = currentParent.parent;
@@ -471,7 +472,17 @@ class Component extends Element_1.default {
     parentConditionallyHidden() {
         let currentParent = this.parent;
         while (currentParent) {
-            if (currentParent.conditionallyHidden(true)) {
+            if (currentParent._conditionallyHidden) {
+                return true;
+            }
+            currentParent = currentParent.parent;
+        }
+        return false;
+    }
+    parentDefaultHidden() {
+        let currentParent = this.parent;
+        while (currentParent) {
+            if (currentParent.component.hidden) {
                 return true;
             }
             currentParent = currentParent.parent;
@@ -689,48 +700,46 @@ class Component extends Element_1.default {
         }
         return this._logicallyHidden;
     }
-    shouldConditionallyClear(skipParent = false) {
+    shouldConditionallyClearOnPristine() {
+        // If the form is pristine, we should NOT clear the value of a conditionally hidden child component
+        // of a conditionally hidden layout component that defaults to hidden using the "hidden" property.
+        return !this.parentDefaultHidden();
+    }
+    shouldConditionallyClear() {
         // Skip if this component has clearOnHide set to false.
         if (this.component.clearOnHide === false) {
-            return false;
+            this._conditionallyClear = false;
+            return this._conditionallyClear;
         }
         // If the component is logically hidden, then it is conditionally hidden and should clear.
         if (this.logicallyHidden) {
-            return true;
+            this._conditionallyClear = true;
+            return this._conditionallyClear;
         }
         // If we have a condition and it is not conditionally visible, the it should conditionally clear.
-        if (this.hasCondition() && !this.conditionallyVisible()) {
-            return true;
-        }
-        if (skipParent) {
-            // Stop recurrsion for the parent checks.
-            return false;
+        if (this.hasCondition() &&
+            !this.conditionallyVisible() &&
+            (!this.rootPristine || this.shouldConditionallyClearOnPristine())) {
+            this._conditionallyClear = true;
+            return this._conditionallyClear;
         }
-        // If this component has a set value, then it should ONLY clear if a parent is hidden
-        // and has the clearOnHide set to true.
-        if (this.hasSetValue) {
-            return this.parentShouldConditionallyClear();
-        }
-        // Clear the value if the parent is conditionally hidden.
-        return this.parentConditionallyHidden();
+        this._conditionallyClear = this.hasSetValue ? false : this.parentShouldConditionallyClear();
+        return this._conditionallyClear;
     }
-    conditionallyHidden(skipParent = false) {
+    conditionallyHidden() {
+        // If it is logically hidden, then it is conditionally hidden.
         if (this.logicallyHidden) {
-            return true;
+            this._conditionallyHidden = true;
+            return this._conditionallyHidden;
         }
-        if (!this.hasCondition() && !skipParent) {
-            return this.parentConditionallyHidden();
-        }
-        // Return if we are not conditionally visible (conditionallyHidden)
-        if (!this.conditionallyVisible()) {
-            return true;
-        }
-        if (skipParent) {
-            // Stop recurrsion for the parent checks.
-            return false;
+        // If it has a condition, and is not conditionally visible, then it is conditionally hidden.
+        if (this.hasCondition() && !this.conditionallyVisible()) {
+            this._conditionallyHidden = true;
+            return this._conditionallyHidden;
         }
-        // Check the parent.
-        return this.parentConditionallyHidden();
+        // It is conditionally hidden if its parent is conditionally hidden.
+        this._conditionallyHidden = this.parentConditionallyHidden();
+        return this._conditionallyHidden;
     }
     get currentForm() {
         return this._currentForm;

package/lib/cjs/components/form/Form.d.ts

@@ -98,7 +98,6 @@ export default class FormComponent extends Component {
      * @returns {void}
      */
     onSetSubFormValue(submission: object | null | undefined, flags: object | null | undefined): void;
-    areAllComponentsEmpty(data: any): boolean;
     updateSubFormVisibility(): void;
     /**
      * Determines if this form is a Nested Wizard

package/lib/cjs/components/form/Form.js

@@ -101,6 +101,9 @@ class FormComponent extends Component_1.default {
         }
         return this.createSubForm();
     }
+    shouldConditionallyClearOnPristine() {
+        return !this.hasSetValue && super.shouldConditionallyClearOnPristine();
+    }
     get dataReady() {
         var _a;
         return ((_a = this.subForm) === null || _a === void 0 ? void 0 : _a.dataReady) || this.subFormReady || Promise.resolve();
@@ -290,11 +293,13 @@ class FormComponent extends Component_1.default {
                     }
                     this.subForm.attach(element);
                     this.valueChanged = this.hasSetValue;
-                    if (!this.valueChanged && this.dataValue.state !== 'submitted') {
-                        this.setDefaultValue();
-                    }
-                    else {
-                        this.restoreValue();
+                    if (!this.shouldConditionallyClear()) {
+                        if (!this.valueChanged && this.dataValue.state !== 'submitted') {
+                            this.setDefaultValue();
+                        }
+                        else {
+                            this.restoreValue();
+                        }
                     }
                 }
                 if (!this.builderMode && this.component.modalEdit) {
@@ -411,7 +416,7 @@ class FormComponent extends Component_1.default {
                 lodash_1.default.assign(componentsMap, formComponentsMap);
                 this.component.components = this.subForm.components.map((comp) => comp.component);
                 this.subForm.on('change', () => {
-                    if (this.subForm) {
+                    if (this.subForm && !this.shouldConditionallyClear()) {
                         this.dataValue = this.subForm.getValue();
                         this.triggerChange({
                             noEmit: true
@@ -679,20 +684,7 @@ class FormComponent extends Component_1.default {
         }
     }
     isEmpty(value = this.dataValue) {
-        return value === null || lodash_1.default.isEqual(value, this.emptyValue) || (this.areAllComponentsEmpty(value === null || value === void 0 ? void 0 : value.data) && !(value === null || value === void 0 ? void 0 : value._id));
-    }
-    areAllComponentsEmpty(data) {
-        let res = true;
-        if (this.subForm) {
-            this.subForm.everyComponent((comp) => {
-                const componentValue = lodash_1.default.get(data, comp.key);
-                res &= comp.isEmpty(componentValue);
-            });
-        }
-        else {
-            res = false;
-        }
-        return res;
+        return value === null || lodash_1.default.isEqual(value, this.emptyValue);
     }
     getValue() {
         if (this.subForm) {

package/lib/cjs/components/survey/Survey.js

@@ -120,7 +120,7 @@ class SurveyComponent extends Field_1.default {
         return this.component.questions.reduce((result, question) => result && Boolean(value[question.value]), true);
     }
     getInputName(question) {
-        return `${this.options.name}[${question.value}][${this.id}]`;
+        return `${this.options.name}[${question.value}]`;
     }
     getValueAsString(value, options) {
         if (options === null || options === void 0 ? void 0 : options.email) {

package/lib/mjs/components/_classes/component/Component.d.ts

@@ -165,6 +165,7 @@ declare class Component extends Element {
     get componentsMap(): object;
     parentShouldConditionallyClear(): boolean;
     parentConditionallyHidden(): boolean;
+    parentDefaultHidden(): boolean;
     set data(value: any);
     get data(): any;
     mergeSchema(component?: {}): any;
@@ -228,8 +229,11 @@ declare class Component extends Element {
     get visible(): boolean;
     get logicallyHidden(): any;
     _logicallyHidden: any;
-    shouldConditionallyClear(skipParent?: boolean): boolean;
-    conditionallyHidden(skipParent?: boolean): boolean;
+    shouldConditionallyClearOnPristine(): boolean;
+    shouldConditionallyClear(): boolean;
+    _conditionallyClear: boolean | undefined;
+    conditionallyHidden(): boolean;
+    _conditionallyHidden: boolean | undefined;
     set currentForm(instance: any);
     get currentForm(): any;
     _currentForm: any;

package/lib/mjs/components/_classes/component/Component.js

@@ -425,7 +425,8 @@ export default class Component extends Element {
     parentShouldConditionallyClear() {
         let currentParent = this.parent;
         while (currentParent) {
-            if (currentParent.shouldConditionallyClear(true)) {
+            if ((currentParent.allowData && currentParent._conditionallyClear) ||
+                (!currentParent.allowData && currentParent._conditionallyHidden)) {
                 return true;
             }
             currentParent = currentParent.parent;
@@ -435,7 +436,17 @@ export default class Component extends Element {
     parentConditionallyHidden() {
         let currentParent = this.parent;
         while (currentParent) {
-            if (currentParent.conditionallyHidden(true)) {
+            if (currentParent._conditionallyHidden) {
+                return true;
+            }
+            currentParent = currentParent.parent;
+        }
+        return false;
+    }
+    parentDefaultHidden() {
+        let currentParent = this.parent;
+        while (currentParent) {
+            if (currentParent.component.hidden) {
                 return true;
             }
             currentParent = currentParent.parent;
@@ -653,48 +664,46 @@ export default class Component extends Element {
         }
         return this._logicallyHidden;
     }
-    shouldConditionallyClear(skipParent = false) {
+    shouldConditionallyClearOnPristine() {
+        // If the form is pristine, we should NOT clear the value of a conditionally hidden child component
+        // of a conditionally hidden layout component that defaults to hidden using the "hidden" property.
+        return !this.parentDefaultHidden();
+    }
+    shouldConditionallyClear() {
         // Skip if this component has clearOnHide set to false.
         if (this.component.clearOnHide === false) {
-            return false;
+            this._conditionallyClear = false;
+            return this._conditionallyClear;
         }
         // If the component is logically hidden, then it is conditionally hidden and should clear.
         if (this.logicallyHidden) {
-            return true;
+            this._conditionallyClear = true;
+            return this._conditionallyClear;
         }
         // If we have a condition and it is not conditionally visible, the it should conditionally clear.
-        if (this.hasCondition() && !this.conditionallyVisible()) {
-            return true;
-        }
-        if (skipParent) {
-            // Stop recurrsion for the parent checks.
-            return false;
+        if (this.hasCondition() &&
+            !this.conditionallyVisible() &&
+            (!this.rootPristine || this.shouldConditionallyClearOnPristine())) {
+            this._conditionallyClear = true;
+            return this._conditionallyClear;
         }
-        // If this component has a set value, then it should ONLY clear if a parent is hidden
-        // and has the clearOnHide set to true.
-        if (this.hasSetValue) {
-            return this.parentShouldConditionallyClear();
-        }
-        // Clear the value if the parent is conditionally hidden.
-        return this.parentConditionallyHidden();
+        this._conditionallyClear = this.hasSetValue ? false : this.parentShouldConditionallyClear();
+        return this._conditionallyClear;
     }
-    conditionallyHidden(skipParent = false) {
+    conditionallyHidden() {
+        // If it is logically hidden, then it is conditionally hidden.
         if (this.logicallyHidden) {
-            return true;
+            this._conditionallyHidden = true;
+            return this._conditionallyHidden;
         }
-        if (!this.hasCondition() && !skipParent) {
-            return this.parentConditionallyHidden();
-        }
-        // Return if we are not conditionally visible (conditionallyHidden)
-        if (!this.conditionallyVisible()) {
-            return true;
-        }
-        if (skipParent) {
-            // Stop recurrsion for the parent checks.
-            return false;
+        // If it has a condition, and is not conditionally visible, then it is conditionally hidden.
+        if (this.hasCondition() && !this.conditionallyVisible()) {
+            this._conditionallyHidden = true;
+            return this._conditionallyHidden;
         }
-        // Check the parent.
-        return this.parentConditionallyHidden();
+        // It is conditionally hidden if its parent is conditionally hidden.
+        this._conditionallyHidden = this.parentConditionallyHidden();
+        return this._conditionallyHidden;
     }
     get currentForm() {
         return this._currentForm;

package/lib/mjs/components/form/Form.d.ts

@@ -98,7 +98,6 @@ export default class FormComponent extends Component {
      * @returns {void}
      */
     onSetSubFormValue(submission: object | null | undefined, flags: object | null | undefined): void;
-    areAllComponentsEmpty(data: any): boolean;
     updateSubFormVisibility(): void;
     /**
      * Determines if this form is a Nested Wizard

package/lib/mjs/components/form/Form.js

@@ -96,6 +96,9 @@ export default class FormComponent extends Component {
         }
         return this.createSubForm();
     }
+    shouldConditionallyClearOnPristine() {
+        return !this.hasSetValue && super.shouldConditionallyClearOnPristine();
+    }
     get dataReady() {
         return this.subForm?.dataReady || this.subFormReady || Promise.resolve();
     }
@@ -286,11 +289,13 @@ export default class FormComponent extends Component {
                     }
                     this.subForm.attach(element);
                     this.valueChanged = this.hasSetValue;
-                    if (!this.valueChanged && this.dataValue.state !== 'submitted') {
-                        this.setDefaultValue();
-                    }
-                    else {
-                        this.restoreValue();
+                    if (!this.shouldConditionallyClear()) {
+                        if (!this.valueChanged && this.dataValue.state !== 'submitted') {
+                            this.setDefaultValue();
+                        }
+                        else {
+                            this.restoreValue();
+                        }
                     }
                 }
                 if (!this.builderMode && this.component.modalEdit) {
@@ -405,7 +410,7 @@ export default class FormComponent extends Component {
                 _.assign(componentsMap, formComponentsMap);
                 this.component.components = this.subForm.components.map((comp) => comp.component);
                 this.subForm.on('change', () => {
-                    if (this.subForm) {
+                    if (this.subForm && !this.shouldConditionallyClear()) {
                         this.dataValue = this.subForm.getValue();
                         this.triggerChange({
                             noEmit: true
@@ -668,20 +673,7 @@ export default class FormComponent extends Component {
         }
     }
     isEmpty(value = this.dataValue) {
-        return value === null || _.isEqual(value, this.emptyValue) || (this.areAllComponentsEmpty(value?.data) && !value?._id);
-    }
-    areAllComponentsEmpty(data) {
-        let res = true;
-        if (this.subForm) {
-            this.subForm.everyComponent((comp) => {
-                const componentValue = _.get(data, comp.key);
-                res &= comp.isEmpty(componentValue);
-            });
-        }
-        else {
-            res = false;
-        }
-        return res;
+        return value === null || _.isEqual(value, this.emptyValue);
     }
     getValue() {
         if (this.subForm) {

package/lib/mjs/components/survey/Survey.js

@@ -118,7 +118,7 @@ export default class SurveyComponent extends Field {
         return this.component.questions.reduce((result, question) => result && Boolean(value[question.value]), true);
     }
     getInputName(question) {
-        return `${this.options.name}[${question.value}][${this.id}]`;
+        return `${this.options.name}[${question.value}]`;
     }
     getValueAsString(value, options) {
         if (options?.email) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.1.0-dev.6067.676f8e2",
+  "version": "5.1.0-dev.6068.e295b11",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {