@formio/js 5.1.0-dev.6061.f2b1042 → 5.1.0-dev.6064.1c8db05

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

@@ -389,7 +389,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.conditionallyHidden() && this.component.clearOnHide)) {
+                if (!this.shouldConditionallyClear()) {
                     if (!this.hasValue()) {
                         if (this.shouldAddDefaultValue) {
                             this.dataValue = this.defaultValue;
@@ -422,6 +422,16 @@ export default class Component extends Element {
     get componentsMap() {
         return this.root?.childComponentsMap || {};
     }
+    parentShouldConditionallyClear() {
+        let currentParent = this.parent;
+        while (currentParent) {
+            if (currentParent.shouldConditionallyClear(true)) {
+                return true;
+            }
+            currentParent = currentParent.parent;
+        }
+        return false;
+    }
     parentConditionallyHidden() {
         let currentParent = this.parent;
         while (currentParent) {
@@ -643,11 +653,48 @@ export default class Component extends Element {
         }
         return this._logicallyHidden;
     }
+    shouldConditionallyClear(skipParent = false) {
+        // Skip if this component has clearOnHide set to false.
+        if (this.component.clearOnHide === false) {
+            return false;
+        }
+        // If the component is logically hidden, then it is conditionally hidden and should clear.
+        if (this.logicallyHidden) {
+            return true;
+        }
+        // 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 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();
+    }
     conditionallyHidden(skipParent = false) {
-        if (!this.hasCondition()) {
-            return this.logicallyHidden || (skipParent ? false : this.parentConditionallyHidden());
+        if (this.logicallyHidden) {
+            return true;
+        }
+        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;
         }
-        return !this.conditionallyVisible() || this.logicallyHidden || (skipParent ? false : this.parentConditionallyHidden());
+        // Check the parent.
+        return this.parentConditionallyHidden();
     }
     get currentForm() {
         return this._currentForm;
@@ -2046,7 +2093,7 @@ export default class Component extends Element {
                         component: newComponent,
                         result,
                     });
-                    if (!_.isEqual(oldValue, newValue) && !(this.component.clearOnHide && this.conditionallyHidden())) {
+                    if (!_.isEqual(oldValue, newValue) && !this.shouldConditionallyClear()) {
                         this.setValue(newValue);
                         if (this.viewOnly) {
                             this.dataValue = newValue;
@@ -2079,7 +2126,7 @@ export default class Component extends Element {
                         component: newComponent,
                         result,
                     }, 'value');
-                    if (!_.isEqual(oldValue, newValue) && !(this.component.clearOnHide && this.conditionallyHidden())) {
+                    if (!_.isEqual(oldValue, newValue) && !this.shouldConditionallyClear()) {
                         this.setValue(newValue);
                         if (this.viewOnly) {
                             this.dataValue = newValue;
@@ -2185,7 +2232,7 @@ export default class Component extends Element {
     clearComponentOnHide() {
         // clearOnHide defaults to true for old forms (without the value set) so only trigger if the value is false.
         if (this.component.clearOnHide !== false && !this.options.readOnly && !this.options.showHiddenFields) {
-            if (this.conditionallyHidden()) {
+            if (this.shouldConditionallyClear()) {
                 this.deleteValue();
             }
             else if (!this.hasValue() && this.shouldAddDefaultValue) {
@@ -2518,14 +2565,17 @@ export default class Component extends Element {
             (this.component.defaultValue !== null) &&
             (this.component.defaultValue !== undefined));
     }
+    /**
+     * Determine if we should add a default value for this component.
+     * @returns {boolean} - TRUE if a default value should be set
+     */
     get shouldAddDefaultValue() {
-        // It should add a default value if...
-        //  1.) The component is pristine (user has not manually modified it).  AND
-        //      1.) There is a default value setting present OR
-        //      2.) The noDefaults flag is not true AND the empty value is either an empty string or boolean
-        return this.pristine && (this.hasDefaultValue ||
-            (!this.options.noDefaults && (this.emptyValue === '' || (typeof this.emptyValue === 'boolean'))));
+        return this.pristine && this.allowData && (this.hasDefaultValue || !this.options.noDefaults);
     }
+    /**
+     * Get the default value of this component.
+     * @returns {*} - The default value for this component.
+     */
     get defaultValue() {
         let defaultValue = this.emptyValue;
         if (this.component.defaultValue) {
@@ -2795,10 +2845,8 @@ 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.conditionallyHidden() && clearOnHide;
         const allowOverride = _.get(this.component, 'allowCalculateOverride', false);
-        if (shouldBeCleared) {
+        if (this.shouldConditionallyClear()) {
             // remove calculated value so that the value is recalculated once component becomes visible
             if (this.hasOwnProperty('calculatedValue') && allowOverride) {
                 _.unset(this, 'calculatedValue');

package/lib/mjs/components/address/editForm/Address.edit.display.d.ts

@@ -8,6 +8,7 @@ declare const _default: ({
     customConditional: ({ data }: {
         data: any;
     }) => boolean;
+    defaultValue?: undefined;
     placeholder?: undefined;
     validate?: undefined;
 } | {
@@ -15,6 +16,7 @@ declare const _default: ({
     type: string;
     input: boolean;
     key: string;
+    defaultValue: string;
     label: string;
     placeholder: string;
     tooltip: string;
@@ -32,6 +34,7 @@ declare const _default: ({
     label: string;
     tooltip: string;
     customConditional?: undefined;
+    defaultValue?: undefined;
     placeholder?: undefined;
     validate?: undefined;
 } | {
@@ -45,6 +48,7 @@ declare const _default: ({
     customConditional: ({ data }: {
         data: any;
     }) => any;
+    defaultValue?: undefined;
     validate?: undefined;
 })[];
 export default _default;

package/lib/mjs/components/address/editForm/Address.edit.display.js

@@ -13,6 +13,7 @@ export default [
         type: 'textfield',
         input: true,
         key: 'switchToManualModeLabel',
+        defaultValue: 'Can\'t find address? Switch to manual mode.',
         label: 'Switch To Manual Mode Label',
         placeholder: 'Switch To Manual Mode Label',
         tooltip: 'The label for the checkbox used to switch to manual mode.',

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

@@ -517,7 +517,7 @@ export default class FormComponent extends Component {
      * @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.conditionallyHidden() || !this.component.clearOnHide);
+        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.shouldConditionallyClear();
     }
     /**
      * Returns the data for the subform.

package/lib/mjs/components/select/editForm/Select.edit.data.d.ts

@@ -9,100 +9,16 @@ declare const _default: ({
         custom?: undefined;
     };
     type?: undefined;
+    as?: undefined;
+    editor?: undefined;
     weight?: undefined;
     input?: undefined;
     label?: undefined;
     tooltip?: undefined;
-    conditional?: undefined;
-    as?: undefined;
-    editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
+    conditional?: undefined;
     reorder?: undefined;
-    components?: undefined;
-    dataSrc?: undefined;
-    authenticate?: undefined;
-    template?: undefined;
-    valueProperty?: undefined;
-    clearOnHide?: undefined;
-    lazyLoad?: undefined;
-    skipMerge?: undefined;
-    refreshOn?: undefined;
-    onSetItems?: undefined;
-    onChange?: undefined;
-    placeholder?: undefined;
-    validate?: undefined;
-    delimiter?: undefined;
-    requireDecimal?: undefined;
-    encrypted?: undefined;
-    rows?: undefined;
-    mask?: undefined;
-    tableView?: undefined;
-    alwaysEnabled?: undefined;
-} | {
-    type: string;
-    weight: number;
-    input: boolean;
-    key: string;
-    label: string;
-    tooltip: string;
-    conditional: {
-        json: {
-            '===': (string | {
-                var: string;
-            })[];
-            and?: undefined;
-            in?: undefined;
-        };
-    };
-    data?: undefined;
-    as?: undefined;
-    editor?: undefined;
     defaultValue?: undefined;
-    description?: undefined;
-    reorder?: undefined;
-    components?: undefined;
-    dataSrc?: undefined;
-    authenticate?: undefined;
-    template?: undefined;
-    valueProperty?: undefined;
-    clearOnHide?: undefined;
-    lazyLoad?: undefined;
-    skipMerge?: undefined;
-    refreshOn?: undefined;
-    onSetItems?: undefined;
-    onChange?: undefined;
-    placeholder?: undefined;
-    validate?: undefined;
-    delimiter?: undefined;
-    requireDecimal?: undefined;
-    encrypted?: undefined;
-    rows?: undefined;
-    mask?: undefined;
-    tableView?: undefined;
-    alwaysEnabled?: undefined;
-} | {
-    type: string;
-    as: string;
-    editor: string;
-    weight: number;
-    input: boolean;
-    key: string;
-    label: string;
-    tooltip: string;
-    defaultValue: {};
-    conditional: {
-        json: {
-            '===': (string | {
-                var: string;
-            })[];
-            and?: undefined;
-            in?: undefined;
-        };
-    };
-    data?: undefined;
-    description?: undefined;
-    reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -143,8 +59,8 @@ declare const _default: ({
         };
     };
     data?: undefined;
-    defaultValue?: undefined;
     reorder?: undefined;
+    defaultValue?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -192,9 +108,9 @@ declare const _default: ({
     data?: undefined;
     as?: undefined;
     editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
     reorder?: undefined;
+    defaultValue?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -303,9 +219,9 @@ declare const _default: ({
     };
     as?: undefined;
     editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
     reorder?: undefined;
+    defaultValue?: undefined;
     components?: undefined;
     skipMerge?: undefined;
     refreshOn?: undefined;
@@ -340,8 +256,8 @@ declare const _default: ({
     data?: undefined;
     as?: undefined;
     editor?: undefined;
-    defaultValue?: undefined;
     reorder?: undefined;
+    defaultValue?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -411,9 +327,9 @@ declare const _default: ({
     };
     as?: undefined;
     editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
     reorder?: undefined;
+    defaultValue?: undefined;
     components?: undefined;
     authenticate?: undefined;
     placeholder?: undefined;
@@ -443,12 +359,12 @@ declare const _default: ({
         url?: undefined;
         custom?: undefined;
     };
-    conditional?: undefined;
     as?: undefined;
     editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
+    conditional?: undefined;
     reorder?: undefined;
+    defaultValue?: undefined;
     components?: undefined;
     authenticate?: undefined;
     valueProperty?: undefined;
@@ -475,12 +391,53 @@ declare const _default: ({
     placeholder: string;
     tooltip: string;
     data?: undefined;
-    conditional?: undefined;
     as?: undefined;
     editor?: undefined;
+    description?: undefined;
+    conditional?: undefined;
+    reorder?: undefined;
     defaultValue?: undefined;
+    components?: undefined;
+    dataSrc?: undefined;
+    authenticate?: undefined;
+    template?: undefined;
+    valueProperty?: undefined;
+    clearOnHide?: undefined;
+    lazyLoad?: undefined;
+    skipMerge?: undefined;
+    refreshOn?: undefined;
+    onSetItems?: undefined;
+    onChange?: undefined;
+    validate?: undefined;
+    delimiter?: undefined;
+    requireDecimal?: undefined;
+    encrypted?: undefined;
+    rows?: undefined;
+    mask?: undefined;
+    tableView?: undefined;
+    alwaysEnabled?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    tooltip: string;
+    weight: number;
+    conditional: {
+        json: {
+            '===': (string | {
+                var: string;
+            })[];
+            and?: undefined;
+            in?: undefined;
+        };
+    };
+    data?: undefined;
+    as?: undefined;
+    editor?: undefined;
     description?: undefined;
     reorder?: undefined;
+    defaultValue?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -492,6 +449,7 @@ declare const _default: ({
     refreshOn?: undefined;
     onSetItems?: undefined;
     onChange?: undefined;
+    placeholder?: undefined;
     validate?: undefined;
     delimiter?: undefined;
     requireDecimal?: undefined;
@@ -520,8 +478,8 @@ declare const _default: ({
     data?: undefined;
     as?: undefined;
     editor?: undefined;
-    defaultValue?: undefined;
     reorder?: undefined;
+    defaultValue?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -668,8 +626,8 @@ declare const _default: ({
     data?: undefined;
     as?: undefined;
     editor?: undefined;
-    defaultValue?: undefined;
     reorder?: undefined;
+    defaultValue?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -710,9 +668,9 @@ declare const _default: ({
     };
     data?: undefined;
     as?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
     reorder?: undefined;
+    defaultValue?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -759,9 +717,9 @@ declare const _default: ({
     };
     as?: undefined;
     editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
     reorder?: undefined;
+    defaultValue?: undefined;
     components?: undefined;
     authenticate?: undefined;
     template?: undefined;
@@ -831,10 +789,10 @@ declare const _default: ({
     defaultValue: boolean;
     tooltip: string;
     data?: undefined;
-    conditional?: undefined;
     as?: undefined;
     editor?: undefined;
     description?: undefined;
+    conditional?: undefined;
     reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
@@ -927,10 +885,10 @@ declare const _default: ({
     weight: number;
     tooltip: string;
     data?: undefined;
-    conditional?: undefined;
     as?: undefined;
     editor?: undefined;
     description?: undefined;
+    conditional?: undefined;
     reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
@@ -973,9 +931,9 @@ declare const _default: ({
     data?: undefined;
     as?: undefined;
     editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
     reorder?: undefined;
+    defaultValue?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -1003,12 +961,12 @@ declare const _default: ({
     label: string;
     tooltip: string;
     data?: undefined;
-    conditional?: undefined;
     as?: undefined;
     editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
+    conditional?: undefined;
     reorder?: undefined;
+    defaultValue?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -1040,8 +998,8 @@ declare const _default: ({
     tooltip: string;
     defaultValue: {};
     data?: undefined;
-    conditional?: undefined;
     description?: undefined;
+    conditional?: undefined;
     reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
@@ -1069,16 +1027,16 @@ declare const _default: ({
     onChange(context: any): void;
     data?: undefined;
     type?: undefined;
+    as?: undefined;
+    editor?: undefined;
     weight?: undefined;
     input?: undefined;
     label?: undefined;
     tooltip?: undefined;
-    conditional?: undefined;
-    as?: undefined;
-    editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
+    conditional?: undefined;
     reorder?: undefined;
+    defaultValue?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -1150,15 +1108,15 @@ declare const _default: ({
         };
     };
     data?: undefined;
+    as?: undefined;
+    editor?: undefined;
     weight?: undefined;
     input?: undefined;
     label?: undefined;
     tooltip?: undefined;
-    as?: undefined;
-    editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
     reorder?: undefined;
+    defaultValue?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;
@@ -1184,16 +1142,16 @@ declare const _default: ({
     onChange(context: any): void;
     data?: undefined;
     type?: undefined;
+    as?: undefined;
+    editor?: undefined;
     weight?: undefined;
     input?: undefined;
     label?: undefined;
     tooltip?: undefined;
-    conditional?: undefined;
-    as?: undefined;
-    editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
+    conditional?: undefined;
     reorder?: undefined;
+    defaultValue?: undefined;
     components?: undefined;
     dataSrc?: undefined;
     authenticate?: undefined;

package/lib/mjs/components/select/editForm/Select.edit.data.js

@@ -56,42 +56,6 @@ export default [
             ],
         },
     },
-    {
-        type: 'textfield',
-        weight: 10,
-        input: true,
-        key: 'indexeddb.database',
-        label: 'Database name',
-        tooltip: 'The name of the indexeddb database.',
-        conditional: {
-            json: { '===': [{ var: 'data.dataSrc' }, 'indexeddb'] },
-        },
-    },
-    {
-        type: 'textfield',
-        input: true,
-        key: 'indexeddb.table',
-        label: 'Table name',
-        weight: 16,
-        tooltip: 'The name of table in the indexeddb database.',
-        conditional: {
-            json: { '===': [{ var: 'data.dataSrc' }, 'indexeddb'] },
-        }
-    },
-    {
-        type: 'textarea',
-        as: 'json',
-        editor: 'ace',
-        weight: 18,
-        input: true,
-        key: 'indexeddb.filter',
-        label: 'Row Filter',
-        tooltip: 'Filter table items that match the object.',
-        defaultValue: {},
-        conditional: {
-            json: { '===': [{ var: 'data.dataSrc' }, 'indexeddb'] },
-        },
-    },
     {
         type: 'textarea',
         as: 'json',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.1.0-dev.6061.f2b1042",
+  "version": "5.1.0-dev.6064.1c8db05",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {