@formio/js 5.0.0-dev.5896.56bf2bd → 5.0.0-dev.5902.bf899bf

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

@@ -115,6 +115,13 @@ declare class Component extends Element {
      */
     parent: Component;
     _path: string;
+    /**
+     * Determines if this component is conditionally hidden. Should generally not be set outside of conditional logic pipeline.
+     * This is necessary because of clearOnHide behavior that only clears when conditionally hidden - we need to track
+     * conditionallyHidden separately from "regular" visibility.
+     */
+    _parentConditionallyHidden: any;
+    _conditionallyHidden: any;
     /**
      * Determines if this component is visible, or not.
      */
@@ -207,6 +214,14 @@ declare class Component extends Element {
      * @returns {boolean} - Whether the component is visible or not.
      */
     get visible(): boolean;
+    get conditionallyHidden(): any;
+    /**
+     * Evaluates whether the component is conditionally hidden (as opposed to intentionally hidden, e.g. via the `hidden` component schema property).
+     * @param {object} data - The data object to evaluate the condition against.
+     * @param {object} row - The row object to evaluate the condition against.
+     * @returns {boolean} - Whether the component is conditionally hidden.
+     */
+    checkConditionallyHidden(data?: object, row?: object): boolean;
     set currentForm(instance: any);
     get currentForm(): any;
     _currentForm: any;

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

@@ -345,11 +345,18 @@ class Component extends Element_1.default {
         this._path = '';
         // Needs for Nextgen Rules Engine
         this.resetCaches();
+        /**
+         * Determines if this component is conditionally hidden. Should generally not be set outside of conditional logic pipeline.
+         * This is necessary because of clearOnHide behavior that only clears when conditionally hidden - we need to track
+         * conditionallyHidden separately from "regular" visibility.
+         */
+        this._parentConditionallyHidden = this.options.hasOwnProperty('parentConditionallyHidden') ? this.options.parentConditionallyHidden : false;
+        this._conditionallyHidden = this.checkConditionallyHidden(null, data) || this._parentConditionallyHidden;
         /**
          * Determines if this component is visible, or not.
          */
         this._parentVisible = this.options.hasOwnProperty('parentVisible') ? this.options.parentVisible : true;
-        this._visible = this._parentVisible && this.conditionallyVisible(null, data);
+        this._visible = this._parentVisible && (this.hasCondition() ? !this._conditionallyHidden : !this.component.hidden);
         this._parentDisabled = false;
         /**
          * The reference attribute name for this component
@@ -418,7 +425,7 @@ class Component extends Element_1.default {
             if (this.allowData && this.key) {
                 this.options.name += `[${this.key}]`;
                 // If component is visible or not set to clear on hide, set the default value.
-                if (this.visible || !this.component.clearOnHide) {
+                if (!(this.conditionallyHidden && this.component.clearOnHide)) {
                     if (!this.hasValue()) {
                         if (this.shouldAddDefaultValue) {
                             this.dataValue = this.defaultValue;
@@ -494,7 +501,8 @@ class Component extends Element_1.default {
     init() {
         var _a;
         this.disabled = this.shouldDisabled;
-        this._visible = this.conditionallyVisible(null, null);
+        this._conditionallyHidden = this.checkConditionallyHidden();
+        this._visible = (this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden);
         if ((_a = this.component.addons) === null || _a === void 0 ? void 0 : _a.length) {
             this.component.addons.forEach((addon) => this.createAddon(addon));
         }
@@ -613,7 +621,6 @@ class Component extends Element_1.default {
                 return;
             }
             this._visible = value;
-            this.clearOnHide();
             this.redraw();
         }
     }
@@ -634,6 +641,21 @@ class Component extends Element_1.default {
         }
         return this._visible && this._parentVisible;
     }
+    get conditionallyHidden() {
+        return this._conditionallyHidden || this._parentConditionallyHidden;
+    }
+    /**
+     * Evaluates whether the component is conditionally hidden (as opposed to intentionally hidden, e.g. via the `hidden` component schema property).
+     * @param {object} data - The data object to evaluate the condition against.
+     * @param {object} row - The row object to evaluate the condition against.
+     * @returns {boolean} - Whether the component is conditionally hidden.
+     */
+    checkConditionallyHidden(data = null, row = null) {
+        if (!this.hasCondition()) {
+            return false;
+        }
+        return !this.conditionallyVisible(data, row);
+    }
     get currentForm() {
         return this._currentForm;
     }
@@ -1801,7 +1823,7 @@ class Component extends Element_1.default {
     rebuild() {
         this.destroy();
         this.init();
-        this.visible = this.conditionallyVisible(null, null);
+        this.visible = this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden;
         return this.redraw();
     }
     /**
@@ -1868,8 +1890,8 @@ class Component extends Element_1.default {
     conditionallyVisible(data, row) {
         data = data || this.rootValue;
         row = row || this.data;
-        if (this.builderMode || this.previewMode || !this.hasCondition()) {
-            return !this.component.hidden;
+        if (this.builderMode || this.previewMode) {
+            return true;
         }
         data = data || (this.root ? this.root.data : {});
         return this.checkCondition(row, data);
@@ -1899,8 +1921,14 @@ class Component extends Element_1.default {
         if (!this.builderMode & !this.previewMode && this.fieldLogic(data, row)) {
             this.redraw();
         }
-        // Check advanced conditions
-        const visible = this.conditionallyVisible(data, row);
+        // Check advanced conditions (and cache the result)
+        const isConditionallyHidden = this.checkConditionallyHidden(data, row) || this._parentConditionallyHidden;
+        if (isConditionallyHidden !== this._conditionallyHidden) {
+            this._conditionallyHidden = isConditionallyHidden;
+            this.clearOnHide();
+        }
+        // Check visibility
+        const visible = (this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden);
         if (this.visible !== visible) {
             this.visible = visible;
         }
@@ -2010,6 +2038,12 @@ class Component extends Element_1.default {
                     FormioUtils.setActionProperty(newComponent, action, result, row, data, this);
                     const property = action.property.value;
                     if (!lodash_1.default.isEqual(lodash_1.default.get(this.component, property), lodash_1.default.get(newComponent, property))) {
+                        // Advanced Logic can modify the component's hidden property; because we track conditionally hidden state
+                        // separately from the component's hidden property, and technically this Advanced Logic conditionally hides
+                        // a component, we need to set _conditionallyHidden to the new value
+                        if (property === 'hidden') {
+                            this._conditionallyHidden = newComponent.hidden;
+                        }
                         changed = true;
                     }
                     break;
@@ -2023,7 +2057,7 @@ class Component extends Element_1.default {
                         component: newComponent,
                         result,
                     });
-                    if (!lodash_1.default.isEqual(oldValue, newValue) && !(this.component.clearOnHide && !this.visible)) {
+                    if (!lodash_1.default.isEqual(oldValue, newValue) && !(this.component.clearOnHide && this.conditionallyHidden)) {
                         this.setValue(newValue);
                         if (this.viewOnly) {
                             this.dataValue = newValue;
@@ -2056,7 +2090,7 @@ class Component extends Element_1.default {
                         component: newComponent,
                         result,
                     }, 'value');
-                    if (!lodash_1.default.isEqual(oldValue, newValue) && !(this.component.clearOnHide && !this.visible)) {
+                    if (!lodash_1.default.isEqual(oldValue, newValue) && !(this.component.clearOnHide && this.conditionallyHidden)) {
                         this.setValue(newValue);
                         if (this.viewOnly) {
                             this.dataValue = newValue;
@@ -2167,7 +2201,7 @@ class Component extends Element_1.default {
             this.component.clearOnHide !== false &&
             !this.options.readOnly &&
             !this.options.showHiddenFields) {
-            if (!this.visible) {
+            if (this.conditionallyHidden) {
                 this.deleteValue();
             }
             else if (!this.hasValue() && this.shouldAddDefaultValue) {
@@ -2426,7 +2460,7 @@ class Component extends Element_1.default {
      */
     get dataValue() {
         if (!this.key ||
-            (!this.visible && this.component.clearOnHide && !this.rootPristine)) {
+            (this.conditionallyHidden && this.component.clearOnHide && !this.rootPristine)) {
             return this.emptyValue;
         }
         if (!this.hasValue() && this.shouldAddDefaultValue) {
@@ -2445,7 +2479,7 @@ class Component extends Element_1.default {
     set dataValue(value) {
         if (!this.allowData ||
             !this.key ||
-            (!this.visible && this.component.clearOnHide && !this.rootPristine)) {
+            (this.conditionallyHidden && this.component.clearOnHide && !this.rootPristine)) {
             return;
         }
         if ((value !== null) && (value !== undefined)) {
@@ -2766,7 +2800,7 @@ class Component extends Element_1.default {
         // If no calculated value or
         // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)
         const { clearOnHide } = this.component;
-        const shouldBeCleared = !this.visible && clearOnHide;
+        const shouldBeCleared = this.conditionallyHidden && clearOnHide;
         const allowOverride = lodash_1.default.get(this.component, 'allowCalculateOverride', false);
         if (shouldBeCleared) {
             // remove calculated value so that the value is recalculated once component becomes visible
@@ -3405,7 +3439,7 @@ class Component extends Element_1.default {
                         // If component definition changed, replace it.
                         if (!lodash_1.default.isEqual(this.component, newComponent)) {
                             this.component = newComponent;
-                            const visible = this.conditionallyVisible(null, null);
+                            const visible = this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden;
                             const disabled = this.shouldDisabled;
                             // Change states which won't be recalculated during redrawing
                             if (this.visible !== visible) {

package/lib/cjs/components/_classes/component/editForm/Component.edit.data.js

@@ -133,10 +133,10 @@ exports.default = [
     {
         weight: 700,
         type: 'checkbox',
-        label: 'Clear Value When Hidden',
+        label: 'Omit Value From Submission Data When Conditionally Hidden',
         key: 'clearOnHide',
         defaultValue: true,
-        tooltip: 'When a field is hidden, clear the value.',
+        tooltip: 'When a field is conditionally hidden, omit the value from the submission data.',
         input: true
     },
     utils_1.default.javaScriptValue('Custom Default Value', 'customDefaultValue', 'customDefaultValue', 1000, '<p><h4>Example:</h4><pre>value = data.firstName + " " + data.lastName;</pre></p>', '<p><h4>Example:</h4><pre>{"cat": [{"var": "data.firstName"}, " ", {"var": "data.lastName"}]}</pre>'),

package/lib/cjs/components/_classes/nested/NestedComponent.js

@@ -84,17 +84,26 @@ class NestedComponent extends Field_1.default {
         const visibilityChanged = this._visible !== value;
         this._visible = value;
         const isVisible = this.visible;
+        const isConditionallyHidden = this.checkConditionallyHidden();
         const forceShow = this.shouldForceShow();
         const forceHide = this.shouldForceHide();
-        this.components.forEach(component => {
+        this.components.forEach((component) => {
             // Set the parent visibility first since we may have nested components within nested components
             // and they need to be able to determine their visibility based on the parent visibility.
             component.parentVisible = isVisible;
-            const conditionallyVisible = component.conditionallyVisible();
-            if (forceShow || conditionallyVisible) {
+            component._parentConditionallyHidden = isConditionallyHidden;
+            let visible;
+            if (component.hasCondition()) {
+                component._conditionallyHidden = component.checkConditionallyHidden() || component._parentConditionallyHidden;
+                visible = !component.conditionallyHidden;
+            }
+            else {
+                visible = !component.component.hidden;
+            }
+            if (forceShow || visible) {
                 component.visible = true;
             }
-            else if (forceHide || !isVisible || !conditionallyVisible) {
+            else if (forceHide || !isVisible || !visible) {
                 component.visible = false;
             }
             // If hiding a nested component, clear all errors below.
@@ -103,7 +112,6 @@ class NestedComponent extends Field_1.default {
             }
         });
         if (visibilityChanged) {
-            this.clearOnHide();
             this.redraw();
         }
     }
@@ -384,6 +392,7 @@ class NestedComponent extends Field_1.default {
         data = data || this.data;
         options.parent = this;
         options.parentVisible = this.visible;
+        options.parentConditionallyHidden = this.conditionallyHidden;
         options.root = (options === null || options === void 0 ? void 0 : options.root) || this.root || this;
         options.localRoot = this.localRoot;
         options.skipInit = true;
@@ -642,7 +651,7 @@ class NestedComponent extends Field_1.default {
     clearOnHide(show) {
         super.clearOnHide(show);
         if (this.component.clearOnHide) {
-            if (this.allowData && !this.hasValue() && !(this.options.server && !this.visible)) {
+            if (this.allowData && !this.hasValue() && !this.conditionallyHidden) {
                 this.dataValue = this.defaultValue;
             }
             if (this.hasValue()) {
@@ -671,7 +680,7 @@ class NestedComponent extends Field_1.default {
     }
     calculateValue(data, flags, row) {
         // Do not iterate into children and calculateValues if this nested component is conditionally hidden.
-        if (!this.conditionallyVisible()) {
+        if (this.conditionallyHidden) {
             return false;
         }
         return this.getComponents().reduce((changed, comp) => comp.calculateValue(data, flags, row) || changed, super.calculateValue(data, flags, row));

package/lib/cjs/components/datamap/DataMap.js

@@ -75,7 +75,7 @@ class DataMapComponent extends DataGrid_1.default {
     }
     get dataValue() {
         if (!this.key ||
-            (!this.visible && this.component.clearOnHide)) {
+            (this.conditionallyHidden && this.component.clearOnHide)) {
             return this.emptyValue;
         }
         if (!this.hasValue() && this.shouldAddDefaultValue) {

package/lib/cjs/components/editgrid/EditGrid.js

@@ -1151,7 +1151,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             }
         }
         const changed = this.hasChanged(value, this.dataValue);
-        if (this.parent && !this.options.server) {
+        if (this.parent) {
             this.parent.checkComponentConditions();
         }
         this.dataValue = value;
@@ -1184,10 +1184,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
         this.editRows = this.editRows.slice(0, dataLength);
         this.openWhenEmpty();
         this.updateOnChange(flags, changed);
-        // do not call checkData with server option, it is called when change is triggered in updateOnChange
-        if (!this.options.server) {
-            this.checkData();
-        }
+        this.checkData();
         this.changeState(changed, flags);
         return changed;
     }

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

@@ -421,10 +421,10 @@ class FormComponent extends Component_1.default {
         return this.subFormReady;
     }
     hideSubmitButton(component) {
-        const isSubmitButton = (component.type === 'button') &&
-            ((component.action === 'submit') || !component.action);
+        const isSubmitButton = component.type === 'button' && (component.action === 'submit' || !component.action);
         if (isSubmitButton) {
             component.hidden = true;
+            component.customConditional = 'show = false';
         }
     }
     /**
@@ -434,7 +434,7 @@ class FormComponent extends Component_1.default {
      */
     loadSubForm(fromAttach) {
         var _a, _b, _c, _d, _e;
-        if (this.builderMode || this.isHidden() || (this.isSubFormLazyLoad() && !fromAttach)) {
+        if (this.builderMode || this.conditionallyHidden || (this.isSubFormLazyLoad() && !fromAttach)) {
             return Promise.resolve();
         }
         if (this.hasLoadedForm && !this.isRevisionChanged &&
@@ -518,7 +518,7 @@ class FormComponent extends Component_1.default {
      * @returns {*|boolean} - TRUE if the subform should be submitted, FALSE if it should not.
      */
     get shouldSubmit() {
-        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.isHidden();
+        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.conditionallyHidden;
     }
     /**
      * Returns the data for the subform.

package/lib/cjs/components/html/HTML.js

@@ -56,9 +56,21 @@ class HTMLComponent extends Component_1.default {
     }
     checkRefreshOn(changed) {
         super.checkRefreshOn(changed);
-        if (!this.builderMode && this.component.refreshOnChange && this.element &&
-            !lodash_1.default.isUndefined(changed) && ((lodash_1.default.isBoolean(changed) && changed) || !lodash_1.default.isEmpty(changed)) &&
-            this.conditionallyVisible(this.data, this.row)) {
+        let visible;
+        if (this.hasCondition()) {
+            this._conditionallyHidden = this.checkConditionallyHidden();
+            visible = !this.conditionallyHidden;
+        }
+        else {
+            visible = !this.component.hidden;
+        }
+        const shouldSetContent = !this.builderMode
+            && this.component.refreshOnChange
+            && this.element
+            && !lodash_1.default.isUndefined(changed)
+            && ((lodash_1.default.isBoolean(changed) && changed) || !lodash_1.default.isEmpty(changed))
+            && visible;
+        if (shouldSetContent) {
             this.setContent(this.element, this.renderContent());
         }
     }

package/lib/cjs/utils/utils.js

@@ -295,12 +295,12 @@ exports.checkSimpleConditional = checkSimpleConditional;
  */
 function getComponentActualValue(compPath, data, row) {
     let value = null;
-    if (row) {
-        value = (0, formUtils_1.getValue)({ data: row }, compPath);
-    }
-    if (data && lodash_1.default.isNil(value)) {
+    if (data) {
         value = (0, formUtils_1.getValue)({ data }, compPath);
     }
+    if (row && lodash_1.default.isNil(value)) {
+        value = (0, formUtils_1.getValue)({ data: row }, compPath);
+    }
     // FOR-400 - Fix issue where falsey values were being evaluated as show=true
     if (lodash_1.default.isNil(value) || (lodash_1.default.isObject(value) && lodash_1.default.isEmpty(value))) {
         value = '';

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

@@ -115,6 +115,13 @@ declare class Component extends Element {
      */
     parent: Component;
     _path: string;
+    /**
+     * Determines if this component is conditionally hidden. Should generally not be set outside of conditional logic pipeline.
+     * This is necessary because of clearOnHide behavior that only clears when conditionally hidden - we need to track
+     * conditionallyHidden separately from "regular" visibility.
+     */
+    _parentConditionallyHidden: any;
+    _conditionallyHidden: any;
     /**
      * Determines if this component is visible, or not.
      */
@@ -207,6 +214,14 @@ declare class Component extends Element {
      * @returns {boolean} - Whether the component is visible or not.
      */
     get visible(): boolean;
+    get conditionallyHidden(): any;
+    /**
+     * Evaluates whether the component is conditionally hidden (as opposed to intentionally hidden, e.g. via the `hidden` component schema property).
+     * @param {object} data - The data object to evaluate the condition against.
+     * @param {object} row - The row object to evaluate the condition against.
+     * @returns {boolean} - Whether the component is conditionally hidden.
+     */
+    checkConditionallyHidden(data?: object, row?: object): boolean;
     set currentForm(instance: any);
     get currentForm(): any;
     _currentForm: any;

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

@@ -308,11 +308,18 @@ export default class Component extends Element {
         this._path = '';
         // Needs for Nextgen Rules Engine
         this.resetCaches();
+        /**
+         * Determines if this component is conditionally hidden. Should generally not be set outside of conditional logic pipeline.
+         * This is necessary because of clearOnHide behavior that only clears when conditionally hidden - we need to track
+         * conditionallyHidden separately from "regular" visibility.
+         */
+        this._parentConditionallyHidden = this.options.hasOwnProperty('parentConditionallyHidden') ? this.options.parentConditionallyHidden : false;
+        this._conditionallyHidden = this.checkConditionallyHidden(null, data) || this._parentConditionallyHidden;
         /**
          * Determines if this component is visible, or not.
          */
         this._parentVisible = this.options.hasOwnProperty('parentVisible') ? this.options.parentVisible : true;
-        this._visible = this._parentVisible && this.conditionallyVisible(null, data);
+        this._visible = this._parentVisible && (this.hasCondition() ? !this._conditionallyHidden : !this.component.hidden);
         this._parentDisabled = false;
         /**
          * The reference attribute name for this component
@@ -381,7 +388,7 @@ export default class Component extends Element {
             if (this.allowData && this.key) {
                 this.options.name += `[${this.key}]`;
                 // If component is visible or not set to clear on hide, set the default value.
-                if (this.visible || !this.component.clearOnHide) {
+                if (!(this.conditionallyHidden && this.component.clearOnHide)) {
                     if (!this.hasValue()) {
                         if (this.shouldAddDefaultValue) {
                             this.dataValue = this.defaultValue;
@@ -455,7 +462,8 @@ export default class Component extends Element {
     }
     init() {
         this.disabled = this.shouldDisabled;
-        this._visible = this.conditionallyVisible(null, null);
+        this._conditionallyHidden = this.checkConditionallyHidden();
+        this._visible = (this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden);
         if (this.component.addons?.length) {
             this.component.addons.forEach((addon) => this.createAddon(addon));
         }
@@ -573,7 +581,6 @@ export default class Component extends Element {
                 return;
             }
             this._visible = value;
-            this.clearOnHide();
             this.redraw();
         }
     }
@@ -594,6 +601,21 @@ export default class Component extends Element {
         }
         return this._visible && this._parentVisible;
     }
+    get conditionallyHidden() {
+        return this._conditionallyHidden || this._parentConditionallyHidden;
+    }
+    /**
+     * Evaluates whether the component is conditionally hidden (as opposed to intentionally hidden, e.g. via the `hidden` component schema property).
+     * @param {object} data - The data object to evaluate the condition against.
+     * @param {object} row - The row object to evaluate the condition against.
+     * @returns {boolean} - Whether the component is conditionally hidden.
+     */
+    checkConditionallyHidden(data = null, row = null) {
+        if (!this.hasCondition()) {
+            return false;
+        }
+        return !this.conditionallyVisible(data, row);
+    }
     get currentForm() {
         return this._currentForm;
     }
@@ -1764,7 +1786,7 @@ export default class Component extends Element {
     rebuild() {
         this.destroy();
         this.init();
-        this.visible = this.conditionallyVisible(null, null);
+        this.visible = this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden;
         return this.redraw();
     }
     /**
@@ -1831,8 +1853,8 @@ export default class Component extends Element {
     conditionallyVisible(data, row) {
         data = data || this.rootValue;
         row = row || this.data;
-        if (this.builderMode || this.previewMode || !this.hasCondition()) {
-            return !this.component.hidden;
+        if (this.builderMode || this.previewMode) {
+            return true;
         }
         data = data || (this.root ? this.root.data : {});
         return this.checkCondition(row, data);
@@ -1862,8 +1884,14 @@ export default class Component extends Element {
         if (!this.builderMode & !this.previewMode && this.fieldLogic(data, row)) {
             this.redraw();
         }
-        // Check advanced conditions
-        const visible = this.conditionallyVisible(data, row);
+        // Check advanced conditions (and cache the result)
+        const isConditionallyHidden = this.checkConditionallyHidden(data, row) || this._parentConditionallyHidden;
+        if (isConditionallyHidden !== this._conditionallyHidden) {
+            this._conditionallyHidden = isConditionallyHidden;
+            this.clearOnHide();
+        }
+        // Check visibility
+        const visible = (this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden);
         if (this.visible !== visible) {
             this.visible = visible;
         }
@@ -1973,6 +2001,12 @@ export default class Component extends Element {
                     FormioUtils.setActionProperty(newComponent, action, result, row, data, this);
                     const property = action.property.value;
                     if (!_.isEqual(_.get(this.component, property), _.get(newComponent, property))) {
+                        // Advanced Logic can modify the component's hidden property; because we track conditionally hidden state
+                        // separately from the component's hidden property, and technically this Advanced Logic conditionally hides
+                        // a component, we need to set _conditionallyHidden to the new value
+                        if (property === 'hidden') {
+                            this._conditionallyHidden = newComponent.hidden;
+                        }
                         changed = true;
                     }
                     break;
@@ -1986,7 +2020,7 @@ export default class Component extends Element {
                         component: newComponent,
                         result,
                     });
-                    if (!_.isEqual(oldValue, newValue) && !(this.component.clearOnHide && !this.visible)) {
+                    if (!_.isEqual(oldValue, newValue) && !(this.component.clearOnHide && this.conditionallyHidden)) {
                         this.setValue(newValue);
                         if (this.viewOnly) {
                             this.dataValue = newValue;
@@ -2019,7 +2053,7 @@ export default class Component extends Element {
                         component: newComponent,
                         result,
                     }, 'value');
-                    if (!_.isEqual(oldValue, newValue) && !(this.component.clearOnHide && !this.visible)) {
+                    if (!_.isEqual(oldValue, newValue) && !(this.component.clearOnHide && this.conditionallyHidden)) {
                         this.setValue(newValue);
                         if (this.viewOnly) {
                             this.dataValue = newValue;
@@ -2130,7 +2164,7 @@ export default class Component extends Element {
             this.component.clearOnHide !== false &&
             !this.options.readOnly &&
             !this.options.showHiddenFields) {
-            if (!this.visible) {
+            if (this.conditionallyHidden) {
                 this.deleteValue();
             }
             else if (!this.hasValue() && this.shouldAddDefaultValue) {
@@ -2392,7 +2426,7 @@ export default class Component extends Element {
      */
     get dataValue() {
         if (!this.key ||
-            (!this.visible && this.component.clearOnHide && !this.rootPristine)) {
+            (this.conditionallyHidden && this.component.clearOnHide && !this.rootPristine)) {
             return this.emptyValue;
         }
         if (!this.hasValue() && this.shouldAddDefaultValue) {
@@ -2411,7 +2445,7 @@ export default class Component extends Element {
     set dataValue(value) {
         if (!this.allowData ||
             !this.key ||
-            (!this.visible && this.component.clearOnHide && !this.rootPristine)) {
+            (this.conditionallyHidden && this.component.clearOnHide && !this.rootPristine)) {
             return;
         }
         if ((value !== null) && (value !== undefined)) {
@@ -2731,7 +2765,7 @@ export default class Component extends Element {
         // If no calculated value or
         // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)
         const { clearOnHide } = this.component;
-        const shouldBeCleared = !this.visible && clearOnHide;
+        const shouldBeCleared = this.conditionallyHidden && clearOnHide;
         const allowOverride = _.get(this.component, 'allowCalculateOverride', false);
         if (shouldBeCleared) {
             // remove calculated value so that the value is recalculated once component becomes visible
@@ -3367,7 +3401,7 @@ export default class Component extends Element {
                         // If component definition changed, replace it.
                         if (!_.isEqual(this.component, newComponent)) {
                             this.component = newComponent;
-                            const visible = this.conditionallyVisible(null, null);
+                            const visible = this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden;
                             const disabled = this.shouldDisabled;
                             // Change states which won't be recalculated during redrawing
                             if (this.visible !== visible) {

package/lib/mjs/components/_classes/component/editForm/Component.edit.data.js

@@ -128,10 +128,10 @@ export default [
     {
         weight: 700,
         type: 'checkbox',
-        label: 'Clear Value When Hidden',
+        label: 'Omit Value From Submission Data When Conditionally Hidden',
         key: 'clearOnHide',
         defaultValue: true,
-        tooltip: 'When a field is hidden, clear the value.',
+        tooltip: 'When a field is conditionally hidden, omit the value from the submission data.',
         input: true
     },
     EditFormUtils.javaScriptValue('Custom Default Value', 'customDefaultValue', 'customDefaultValue', 1000, '<p><h4>Example:</h4><pre>value = data.firstName + " " + data.lastName;</pre></p>', '<p><h4>Example:</h4><pre>{"cat": [{"var": "data.firstName"}, " ", {"var": "data.lastName"}]}</pre>'),