@formio/js 5.1.0-dev.6112.86987a5 → 5.1.0-dev.6112.b627acb

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

@@ -290,29 +290,35 @@ class FormComponent extends Component_1.default {
                     return;
                 }
                 this.setContent(element, this.render());
+                const postAttach = () => {
+                    if (!this.builderMode && this.component.modalEdit) {
+                        const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;
+                        const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;
+                        this.componentModal = new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);
+                        this.subForm.element = this.componentModal.refs.componentContent || this.subForm.element;
+                        this.setOpenModalElement();
+                    }
+                    this.calculateValue();
+                };
                 if (this.subForm) {
                     if (this.isNestedWizard) {
                         element = this.root.element;
                     }
-                    this.subForm.attach(element);
-                    this.valueChanged = this.hasSetValue;
-                    if (!this.shouldConditionallyClear()) {
-                        if (!this.valueChanged && this.dataValue.state !== 'submitted') {
-                            this.setDefaultValue();
-                        }
-                        else {
-                            this.restoreValue();
+                    return this.subForm.attach(element).then(() => {
+                        this.valueChanged = this.hasSetValue;
+                        if (!this.shouldConditionallyClear()) {
+                            if (!this.valueChanged && this.dataValue.state !== 'submitted') {
+                                this.setDefaultValue();
+                            }
+                            else {
+                                this.restoreValue();
+                            }
                         }
-                    }
-                }
-                if (!this.builderMode && this.component.modalEdit) {
-                    const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;
-                    const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;
-                    this.componentModal = new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);
-                    this.subForm.element = this.componentModal.refs.componentContent || this.subForm.element;
-                    this.setOpenModalElement();
+                        postAttach();
+                        this.setComponentsMap();
+                    });
                 }
-                this.calculateValue();
+                postAttach();
             });
         });
     }
@@ -390,6 +396,14 @@ class FormComponent extends Component_1.default {
             this.emit('subWizardsUpdated', subForm);
         }
     }
+    setComponentsMap() {
+        if (!this.subForm) {
+            return;
+        }
+        const componentsMap = this.componentsMap;
+        const formComponentsMap = this.subForm.componentsMap;
+        lodash_1.default.assign(componentsMap, formComponentsMap);
+    }
     /**
      * Create a subform instance.
      * @param {boolean} [fromAttach] - This function is being called from an `attach` method.
@@ -415,9 +429,7 @@ class FormComponent extends Component_1.default {
                 this.subForm = instance;
                 this.subForm.currentForm = this;
                 this.subForm.parentVisible = this.visible;
-                const componentsMap = this.componentsMap;
-                const formComponentsMap = this.subForm.componentsMap;
-                lodash_1.default.assign(componentsMap, formComponentsMap);
+                this.setComponentsMap();
                 this.component.components = (_a = this.subForm._form) === null || _a === void 0 ? void 0 : _a.components;
                 this.component.display = (_b = this.subForm._form) === null || _b === void 0 ? void 0 : _b.display;
                 this.subForm.on('change', () => {

package/lib/cjs/components/number/Number.js

@@ -91,10 +91,13 @@ class NumberComponent extends Input_1.default {
     }
     get defaultValue() {
         let defaultValue = super.defaultValue;
-        if (typeof defaultValue === 'string') {
+        if (typeof defaultValue === 'string' && defaultValue) {
             // Default value may be a string or have custom thousands separators or decimal symbols, so we need to call
             // parseNumber on it
             defaultValue = this.parseNumber(defaultValue);
+            if (lodash_1.default.isNaN(defaultValue)) {
+                defaultValue = null;
+            }
         }
         if (!defaultValue && this.component.defaultValue === 0) {
             defaultValue = this.component.defaultValue;

package/lib/cjs/components/radio/Radio.d.ts

@@ -16,6 +16,7 @@ export default class RadioComponent extends ListComponent {
     static savedValueTypes(schema: any): any[];
     constructor(component: any, options: any, data: any);
     previousValue: any;
+    uncheckValue(flags?: {}): void;
     get inputInfo(): any;
     get emptyValue(): string;
     get isRadio(): boolean;

package/lib/cjs/components/radio/Radio.js

@@ -79,13 +79,15 @@ class RadioComponent extends ListComponent_1.default {
         }
         return defaultValue;
     }
-    resetValue() {
+    uncheckValue(flags = {}) {
         this.unset();
         this.setValue(this.emptyValue, {
             noUpdateEvent: true,
             noValidate: true,
             resetValue: true
         });
+        this.triggerChange(flags);
+        this.setSelectedClasses();
     }
     get inputInfo() {
         var _a;
@@ -142,7 +144,7 @@ class RadioComponent extends ListComponent_1.default {
         });
         this.optionsLoaded = !this.component.dataSrc || this.component.dataSrc === 'values';
         this.loadedOptions = [];
-        if (!this.visible) {
+        if (!this.visible || this.optionsLoaded) {
             this.itemsLoadedResolve();
         }
         // Get the template keys for this radio component.
@@ -400,9 +402,7 @@ class RadioComponent extends ListComponent_1.default {
         this.currentValue = this.dataValue;
         const shouldResetValue = flags && flags.modified && !flags.noUpdateEvent && this.previousValue === this.currentValue;
         if (shouldResetValue) {
-            this.resetValue();
-            this.triggerChange(flags);
-            this.setSelectedClasses();
+            this.uncheckValue(flags);
         }
         this.previousValue = this.dataValue;
         return changed;

package/lib/cjs/components/select/Select.js

@@ -1124,7 +1124,7 @@ class SelectComponent extends ListComponent_1.default {
         }
         // Choices will return undefined if nothing is selected. We really want '' to be empty.
         if (value === undefined || value === null) {
-            value = '';
+            value = this.emptyValue;
         }
         return value;
     }

package/lib/cjs/components/tags/Tags.js

@@ -160,6 +160,13 @@ class TagsComponent extends Input_1.default {
             this.refs.input[0].parentNode.lastChild.focus();
         }
     }
+    getValue() {
+        if (this.choices) {
+            const value = this.choices.getValue(true);
+            return value.join(`${this.delimiter}`);
+        }
+        return super.getValue();
+    }
     getValueAsString(value) {
         if (!value) {
             return '';

package/lib/cjs/formio.form.d.ts

@@ -23,4 +23,5 @@ import { Formio } from './Formio';
 import Licenses from './licenses';
 import EventEmitter from './EventEmitter';
 import Webform from './Webform';
-export { Components, Displays, Providers, Widgets, Templates, Utils, Form, Formio, Licenses, EventEmitter, Webform };
+import { DefaultEvaluator } from './utils';
+export { Components, Displays, Providers, Widgets, Templates, Utils, Form, Formio, Licenses, EventEmitter, Webform, DefaultEvaluator };

package/lib/cjs/formio.form.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Webform = exports.EventEmitter = exports.Licenses = exports.Formio = exports.Form = exports.Utils = exports.Templates = exports.Widgets = exports.Providers = exports.Displays = exports.Components = exports.FormioCore = exports.useModule = exports.registerModule = void 0;
+exports.DefaultEvaluator = exports.Webform = exports.EventEmitter = exports.Licenses = exports.Formio = exports.Form = exports.Utils = exports.Templates = exports.Widgets = exports.Providers = exports.Displays = exports.Components = exports.FormioCore = exports.useModule = exports.registerModule = void 0;
 const lodash_1 = __importDefault(require("lodash"));
 const Formio_1 = require("./Formio");
 Object.defineProperty(exports, "Formio", { enumerable: true, get: function () { return Formio_1.Formio; } });
@@ -30,6 +30,7 @@ const Webform_1 = __importDefault(require("./Webform"));
 exports.Webform = Webform_1.default;
 const core_1 = require("@formio/core");
 const utils_2 = require("./utils");
+Object.defineProperty(exports, "DefaultEvaluator", { enumerable: true, get: function () { return utils_2.DefaultEvaluator; } });
 Formio_1.Formio.loadModules = (path = `${Formio_1.Formio.getApiUrl()}/externalModules.js`, name = 'externalModules') => {
     Formio_1.Formio.requireLibrary(name, name, path, true)
         .then((modules) => {

package/lib/cjs/providers/storage/url.js

@@ -127,13 +127,17 @@ function url(formio) {
         deleteFile(fileInfo, options) {
             return new Promise((resolve, reject) => {
                 const xhr = new XMLHttpRequest();
-                xhr.open('DELETE', fileInfo.url, true);
+                xhr.open("DELETE", fileInfo.url, true);
+                const token = formio.getToken();
+                if (token) {
+                    xhr.setRequestHeader("x-jwt-token", token);
+                }
                 xhr.onload = () => {
                     if (xhr.status >= 200 && xhr.status < 300) {
-                        resolve('File deleted');
+                        resolve("File deleted");
                     }
                     else {
-                        reject(xhr.response || 'Unable to delete file');
+                        reject(xhr.response || "Unable to delete file");
                     }
                 };
                 if (options) {

package/lib/cjs/utils/formUtils.d.ts

@@ -26,10 +26,10 @@ export const getBestMatch: typeof Utils.getBestMatch;
 export const getComponentFromPath: typeof Utils.getComponentFromPath;
 export const getComponentValue: typeof Utils.getComponentValue;
 export const findComponents: typeof Utils.findComponents;
-export const eachComponentDataAsync: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataAsyncCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined, noScopeReset?: boolean | undefined) => Promise<void>;
-export const eachComponentData: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined, noScopeReset?: boolean | undefined) => void;
+export const eachComponentDataAsync: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataAsyncCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined, noScopeReset?: boolean | undefined, afterFn?: import("@formio/core").EachComponentDataAsyncCallback | undefined) => Promise<void>;
+export const eachComponentData: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined, noScopeReset?: boolean | undefined, afterFn?: import("@formio/core").EachComponentDataCallback | undefined) => void;
 export const getComponentKey: typeof Utils.getComponentKey;
-export const getContextualRowPath: typeof Utils.getContextualRowPath;
+export const getContextualRowPath: any;
 export const getContextualRowData: typeof Utils.getContextualRowData;
 export const componentInfo: typeof Utils.componentInfo;
 export const eachComponent: typeof Utils.eachComponent;

package/lib/cjs/utils/index.d.ts

@@ -2,7 +2,7 @@ export * from "./utils";
 export * from "./formUtils";
 export default FormioUtils;
 declare const FormioUtils: {
-    Evaluator: import("./Evaluator").DefaultEvaluator;
+    Evaluator: DefaultEvaluator;
     interpolate: typeof interpolate;
     ConditionOperators: {
         [x: string]: typeof import("./conditionOperators/IsEqualTo").default | typeof import("./conditionOperators/DateGreaterThan").default;
@@ -37,10 +37,10 @@ declare const FormioUtils: {
     getComponentFromPath: typeof import("@formio/core/lib/utils/formUtil").getComponentFromPath;
     getComponentValue: typeof import("@formio/core/lib/utils/formUtil").getComponentValue;
     findComponents: typeof import("@formio/core/lib/utils/formUtil").findComponents;
-    eachComponentDataAsync: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataAsyncCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined, noScopeReset?: boolean | undefined) => Promise<void>;
-    eachComponentData: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined, noScopeReset?: boolean | undefined) => void;
+    eachComponentDataAsync: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataAsyncCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined, noScopeReset?: boolean | undefined, afterFn?: import("@formio/core").EachComponentDataAsyncCallback | undefined) => Promise<void>;
+    eachComponentData: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined, noScopeReset?: boolean | undefined, afterFn?: import("@formio/core").EachComponentDataCallback | undefined) => void;
     getComponentKey: typeof import("@formio/core/lib/utils/formUtil").getComponentKey;
-    getContextualRowPath: typeof import("@formio/core/lib/utils/formUtil").getContextualRowPath;
+    getContextualRowPath: any;
     getContextualRowData: typeof import("@formio/core/lib/utils/formUtil").getContextualRowData;
     componentInfo: typeof import("@formio/core/lib/utils/formUtil").componentInfo;
     eachComponent: typeof import("@formio/core/lib/utils/formUtil").eachComponent;
@@ -164,7 +164,8 @@ declare const FormioUtils: {
     interpolateErrors: (component: Component, errors: FieldError[], interpolateFn: Function) => [];
 };
 import { Evaluator } from './Evaluator';
+import { DefaultEvaluator } from './Evaluator';
 import { registerEvaluator } from './Evaluator';
 import { interpolate } from './Evaluator';
 import moment from 'moment';
-export { FormioUtils as Utils, Evaluator, registerEvaluator };
+export { FormioUtils as Utils, Evaluator, DefaultEvaluator, registerEvaluator };

package/lib/cjs/utils/index.js

@@ -29,12 +29,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.registerEvaluator = exports.Evaluator = exports.Utils = void 0;
+exports.registerEvaluator = exports.DefaultEvaluator = exports.Evaluator = exports.Utils = void 0;
 const utils = __importStar(require("./utils"));
 const formUtils = __importStar(require("./formUtils"));
 const Evaluator_1 = require("./Evaluator");
 Object.defineProperty(exports, "Evaluator", { enumerable: true, get: function () { return Evaluator_1.Evaluator; } });
 Object.defineProperty(exports, "registerEvaluator", { enumerable: true, get: function () { return Evaluator_1.registerEvaluator; } });
+Object.defineProperty(exports, "DefaultEvaluator", { enumerable: true, get: function () { return Evaluator_1.DefaultEvaluator; } });
 const conditionOperators_1 = __importDefault(require("./conditionOperators"));
 const lodash_1 = __importDefault(require("lodash"));
 const moment_1 = __importDefault(require("moment"));

package/lib/cjs/utils/utils.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = exports.observeOverload = exports.withSwitch = exports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToDayjs = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.dayjsDate = exports.shouldHandleTimezone = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.removeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = void 0;
 exports.hasEncodedTimezone = exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports.getFocusableElements = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.fastCloneDeep = exports.sanitize = void 0;
-/* global jQuery */
 const lodash_1 = __importDefault(require("lodash"));
 const moment_timezone_1 = __importDefault(require("moment-timezone/moment-timezone"));
 const jstimezonedetect_1 = __importDefault(require("jstimezonedetect"));
@@ -1064,9 +1063,6 @@ function bootstrapVersion(options) {
     if (options.bootstrap) {
         return options.bootstrap;
     }
-    if ((typeof jQuery === 'function') && (typeof jQuery().collapse === 'function')) {
-        return parseInt(jQuery.fn.collapse.Constructor.VERSION.split('.')[0], 10);
-    }
     if (window.bootstrap && window.bootstrap.Collapse) {
         return parseInt(window.bootstrap.Collapse.VERSION.split('.')[0], 10);
     }

package/lib/cjs/widgets/CalendarWidget.js

@@ -123,7 +123,14 @@ class CalendarWidget extends InputWidget_1.default {
                 if (this._input) {
                     const { locale } = this.settings;
                     if (locale && locale.length >= 2 && locale !== 'en') {
-                        return Formio_1.Formio.requireLibrary(`flatpickr-${locale}`, `flatpickr.l10ns.${locale}`, `${Formio_1.Formio.cdn['flatpickr']}/l10n/${locale}.js`, true).then(() => this.initFlatpickr(Flatpickr));
+                        return Formio_1.Formio.requireLibrary(`flatpickr-${locale}`, `flatpickr.l10ns.${locale}`, `${Formio_1.Formio.cdn['flatpickr']}/l10n/${locale}.js`, true)
+                            .catch(() => {
+                            // fallback to en if locale fails to load
+                            this.settings.locale = 'en';
+                        })
+                            .finally(() => {
+                            this.initFlatpickr(Flatpickr);
+                        });
                     }
                     else {
                         this.initFlatpickr(Flatpickr);

package/lib/mjs/Element.js

@@ -525,9 +525,9 @@ export default class Element {
         if (this.component.filter === string && !this.options.building) {
             const evalContext = this.evalContext(data);
             evalContext.data = _.mapValues(evalContext.data, (val) => _.isString(val) ? encodeURIComponent(val) : val);
-            return FormioUtils.Evaluator.interpolate(string, evalContext, options);
+            return FormioUtils.interpolate(string, evalContext, options);
         }
-        return FormioUtils.Evaluator.interpolate(string, this.evalContext(data), options);
+        return FormioUtils.interpolate(string, this.evalContext(data), options);
     }
     /**
      * Performs an evaluation using the evaluation context of this component.

package/lib/mjs/PDFBuilder.js

@@ -447,18 +447,20 @@ export default class PDFBuilder extends WebformBuilder {
         const repeatablePathsComps = this.findComponentsWithRepeatablePaths();
         // update elements which path was duplicated if any pathes have been changed
         if (!_.isEqual(this.repeatablePathsComps, repeatablePathsComps)) {
-            eachComponent(this.webform.getComponents(), (comp) => {
-                if (this.repeatablePathsComps.includes(comp.component)) {
-                    this.webform.postMessage({ name: 'updateElement', data: comp.component });
-                }
-            });
+            if (!_.isEmpty(this.repeatablePathsComps)) {
+                eachComponent(this.webform.getComponents(), (comp) => {
+                    if (this.repeatablePathsComps.includes(comp.component)) {
+                        this.webform.postMessage({ name: 'updateElement', data: comp.component });
+                    }
+                });
+            }
             this.repeatablePathsComps = repeatablePathsComps;
         }
         if (!repeatablePathsComps.length) {
             return;
         }
         eachComponent(this.webform.getComponents(), (comp) => {
-            if (this.repeatablePathsComps.includes(comp)) {
+            if (this.repeatablePathsComps.includes(comp.component)) {
                 this.webform.postMessage({
                     name: 'showBuilderErrors',
                     data: {

package/lib/mjs/Webform.js

@@ -333,6 +333,14 @@ export default class Webform extends NestedDataComponent {
     get shadowRoot() {
         return this.options.shadowRoot;
     }
+    // Webforms have no default value setting, so this should be always false
+    // I does not affect setting default value to nested forms
+    get shouldAddDefaultValue() {
+        return false;
+    }
+    get componentsMap() {
+        return this.childComponentsMap || {};
+    }
     /**
      * Add a language for translations
      * @param {string} code - The language code for the language being added.
@@ -1121,7 +1129,7 @@ export default class Webform extends NestedDataComponent {
         // Mark any components as invalid if in a custom message.
         const componentErrors = {};
         errors.forEach((err) => {
-            const path = err.path || err.context?.path || err.component?.key;
+            const path = getStringFromComponentPath(err.path) || err.context?.path || err.component?.key;
             if (!componentErrors[path]) {
                 componentErrors[path] = [];
             }

package/lib/mjs/WebformBuilder.js

@@ -63,8 +63,16 @@ export default class WebformBuilder extends Component {
         }
         this.groupOrder = this.groupOrder
             .filter(group => group && !group.ignore)
-            .sort((a, b) => a.weight - b.weight)
-            .map(group => group.key);
+            .sort((a, b) => a.weight - b.weight);
+        const defaultOpenedGroup = this.groupOrder.find(x => x.key !== 'basic' && x.default);
+        if (defaultOpenedGroup) {
+            this.groupOrder.forEach(x => {
+                if ('default' in x && x.key !== defaultOpenedGroup.key) {
+                    x.default = false;
+                }
+            });
+        }
+        this.groupOrder = this.groupOrder.map(group => group.key);
         for (const type in Components.components) {
             const component = Components.components[type];
             if (component.builderInfo && component.builderInfo.schema) {
@@ -507,8 +515,8 @@ export default class WebformBuilder extends Component {
                     }
                     return elem;
                 };
-                const hideShow = (group, show) => {
-                    if (show) {
+                const hideShow = (group, forceShow, toggle = false) => {
+                    if (forceShow || (toggle && !Array.from(group.classList).includes('show'))) {
                         group.classList.add(['show']);
                         group.style.display = 'inherit';
                     }
@@ -530,7 +538,9 @@ export default class WebformBuilder extends Component {
                             const openByDefault = getAttribute(group, 'default') === 'true';
                             const groupId = group.getAttribute('id').slice('group-'.length);
                             const groupParent = getAttribute(group, 'parent').slice('#builder-sidebar-'.length);
-                            hideShow(group, ((openByDefault && groupParent === clickedId) || groupId === clickedParentId || groupIndex === index));
+                            if (((openByDefault && groupParent === clickedId) || groupId === clickedParentId || groupIndex === index)) {
+                                hideShow(group, false, true);
+                            }
                         });
                     }, true);
                 });
@@ -1082,7 +1092,7 @@ export default class WebformBuilder extends Component {
                     const newComp = parentComponent.addComponent(defaultValueComponent.component, defaultValueComponent.data, sibling);
                     _.pull(newComp.validators, 'required');
                     parentComponent.tabs[tabIndex].splice(index, 1, newComp);
-                    newComp.checkValidity = () => true;
+                    newComp.processOwnValidation = true;
                     newComp.build(defaultValueComponent.element);
                     if (this.preview && !this.preview.defaultChanged) {
                         const defaultValue = _.get(this.preview._data, this.editForm._data.key);
@@ -1180,6 +1190,7 @@ export default class WebformBuilder extends Component {
             submissionData = submissionData.componentJson || submissionData;
             if (submissionData.components && this.originalDefaultValue) {
                 submissionData.components = this.originalDefaultValue.components;
+                this.originalDefaultValue = null;
             }
             const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];
             this.replaceDoubleQuotes(submissionData, fieldsToRemoveDoubleQuotes);

package/lib/mjs/Wizard.js

@@ -591,7 +591,7 @@ export default class Wizard extends Webform {
             if (!this._seenPages.includes(parentNum)) {
                 this._seenPages = this._seenPages.concat(parentNum);
             }
-            this.redraw().then(() => {
+            return this.redraw().then(() => {
                 this.checkData(this.submission.data);
                 this.triggerCaptcha(this.currentPage.components);
                 const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();
@@ -599,7 +599,6 @@ export default class Wizard extends Webform {
                     this.showErrors(errors, true, true);
                 }
             });
-            return Promise.resolve();
         }
         else if (!this.pages.length) {
             this.redraw();
@@ -810,6 +809,11 @@ export default class Wizard extends Webform {
         }
     }
     setValue(submission, flags = {}, ignoreEstablishment) {
+        if (!submission || !submission.data) {
+            submission = {
+                data: {},
+            };
+        }
         const changed = this.getPages({ all: true }).reduce((changed, page) => {
             return this.setNestedValue(page, submission.data, flags, changed) || changed;
         }, false);
@@ -919,10 +923,7 @@ export default class Wizard extends Webform {
             if (pageIndex >= 0) {
                 const page = this.pages[pageIndex];
                 if (page && page !== this.currentPage) {
-                    return this.setPage(pageIndex).then(() => {
-                        this.showErrors(this.validate(this.localData, { dirty: true }));
-                        super.focusOnComponent(key);
-                    });
+                    return this.setPage(pageIndex).then(() => super.focusOnComponent(key));
                 }
             }
         }

package/lib/mjs/WizardBuilder.js

@@ -178,6 +178,10 @@ export default class WizardBuilder extends WebformBuilder {
         this.navigationDragula = null;
         super.detach();
     }
+    destroy(all = false) {
+        this.off('saveComponent');
+        super.destroy(all);
+    }
     rebuild() {
         const page = this.currentPage;
         this.webform.setForm({

package/lib/mjs/components/Components.js

@@ -54,7 +54,7 @@ export default class Components {
             // eslint-disable-next-line new-cap
             comp = new Components.components['datagrid'](component, options, data);
         }
-        else if (component.tree) {
+        else if (component.tree || (component.input && Array.isArray(component.components))) {
             // eslint-disable-next-line new-cap
             comp = new Components.components['nesteddata'](component, options, data);
         }
@@ -72,6 +72,12 @@ export default class Components {
         if (comp.path) {
             comp.componentsMap[comp.path] = comp;
         }
+        // Reset the componentMatches on the root element if any new component is created.
+        let parent = comp.parent;
+        while (parent) {
+            parent.componentMatches = {};
+            parent = parent.parent;
+        }
         return comp;
     }
 }

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

@@ -168,6 +168,7 @@ declare class Component extends Element {
      * @returns {boolean} - If the parent should conditionally clear.
      */
     parentShouldConditionallyClear(): boolean;
+    hasCondionallyHiddenLayoutParent(): boolean;
     parentConditionallyHidden(): boolean;
     /**
      * Returns true if any of the parents default their component "hidden" property to true.

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

@@ -437,6 +437,16 @@ export default class Component extends Element {
         }
         return false;
     }
+    hasCondionallyHiddenLayoutParent() {
+        let currentParent = this.parent;
+        while (currentParent) {
+            if (currentParent._conditionallyHidden && FormioUtils.isLayoutComponent(currentParent) && currentParent.component.clearOnHide === true) {
+                return true;
+            }
+            currentParent = currentParent.parent;
+        }
+        return false;
+    }
     parentConditionallyHidden() {
         let currentParent = this.parent;
         while (currentParent) {
@@ -620,10 +630,13 @@ export default class Component extends Element {
         if (!component) {
             component = this.component;
         }
+        if (!this.path) {
+            return false;
+        }
         if (_.isArray(this.options[visibility])) {
-            return this.options[visibility].includes(component.key);
+            return this.options[visibility].includes(this.path);
         }
-        return this.options[visibility][component.key];
+        return this.options[visibility][this.path];
     }
     shouldForceHide(component) {
         return this.shouldForceVisibility(component, 'hide');
@@ -703,7 +716,7 @@ export default class Component extends Element {
             this._conditionallyClear = true;
             return this._conditionallyClear;
         }
-        this._conditionallyClear = this.hasSetValue ? false : this.parentShouldConditionallyClear();
+        this._conditionallyClear = this.hasSetValue ? this.hasCondionallyHiddenLayoutParent() : this.parentShouldConditionallyClear();
         return this._conditionallyClear;
     }
     /**
@@ -1160,9 +1173,15 @@ export default class Component extends Element {
         if (this.hasInput && this.component.validate?.required && !this.isPDFReadOnlyMode) {
             modalLabel = { className: 'field-required' };
         }
+        let messages = '';
+        if (this.errors?.length) {
+            messages = this.errors.map((err) => {
+                return err.level === 'error' ? this.renderTemplate('message', { ...err }) : '';
+            }).join('');
+        }
         return this.renderModalPreview({
             previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('clickToSetValue'),
-            messages: '',
+            messages,
             labelInfo: modalLabel,
         });
     }
@@ -2549,7 +2568,7 @@ export default class Component extends Element {
         if ((value !== null) && (value !== undefined)) {
             value = this.hook('setDataValue', value, this.key, this._data);
         }
-        if ((value === null) || (value === undefined)) {
+        if ((value === null) || (value === undefined) || _.isNaN(value)) {
             this.unset();
             return;
         }
@@ -2582,17 +2601,6 @@ export default class Component extends Element {
             noUpdateEvent: true,
             noDefault: true
         });
-        if (FormioUtils.isLayoutComponent(this.component) && this.component.clearOnHide === true && !this.hasValue()) {
-            FormioUtils.eachComponent(this.components, (component) => {
-                if (component.component.clearOnHide !== false) {
-                    component.setValue(null, {
-                        noUpdateEvent: true,
-                        noDefault: true
-                    });
-                    component.unset();
-                }
-            });
-        }
         this.unset();
     }
     getCustomDefaultValue(defaultValue) {
@@ -2718,6 +2726,11 @@ export default class Component extends Element {
                 this.setValueAt(i, isArray && !this.isSingleInputValue() ? value[i] : value, flags);
             }
         }
+        // Also reset value of the modal component, otherwise it will keep the old value locally and the preview
+        // element won't refresh
+        if (this.componentModal && flags && flags.resetValue) {
+            this.componentModal.setValue(value);
+        }
         return changed;
     }
     /**