@formio/js 5.1.0-dev.6194.87d4d3f → 5.1.0-dev.6204.b833c7c

package/lib/cjs/Webform.js

@@ -361,6 +361,14 @@ class Webform extends NestedDataComponent_1.default {
     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.

package/lib/cjs/WebformBuilder.js

@@ -83,8 +83,16 @@ class WebformBuilder extends Component_1.default {
         }
         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_1.default.components) {
             const component = Components_1.default.components[type];
             if (component.builderInfo && component.builderInfo.schema) {
@@ -1099,7 +1107,7 @@ class WebformBuilder extends Component_1.default {
                     const newComp = parentComponent.addComponent(defaultValueComponent.component, defaultValueComponent.data, sibling);
                     lodash_1.default.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 = lodash_1.default.get(this.preview._data, this.editForm._data.key);

package/lib/cjs/Wizard.js

@@ -599,7 +599,7 @@ class Wizard extends Webform_1.default {
             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();
@@ -607,7 +607,6 @@ class Wizard extends Webform_1.default {
                     this.showErrors(errors, true, true);
                 }
             });
-            return Promise.resolve();
         }
         else if (!this.pages.length) {
             this.redraw();
@@ -821,6 +820,11 @@ class Wizard extends Webform_1.default {
         }
     }
     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);
@@ -931,10 +935,7 @@ class Wizard extends Webform_1.default {
             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/cjs/components/_classes/nested/NestedComponent.d.ts

@@ -155,7 +155,7 @@ export default class NestedComponent extends Field {
      * @param {import('@formio/core').Component[]} components - The components to attach logic to.
      */
     attachComponentsLogic(components: import('@formio/core').Component[]): void;
-    attachComponents(element: any, components: any, container: any): Promise<any>;
+    attachComponents(element: any, components: any, container: any): Promise<void> | Promise<any[]>;
     /**
      * Remove a component from the components array and from the children object
      * @param {import('@formio/core').Component} component - The component to remove from the components.

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

@@ -538,8 +538,7 @@ class NestedComponent extends Field_1.default {
         container = container || this.component.components;
         element = this.hook('attachComponents', element, components, container, this);
         if (!element) {
-            // Return a non-resolving promise.
-            return (new Promise(() => { }));
+            return Promise.resolve();
         }
         let index = 0;
         const promises = [];
@@ -558,12 +557,16 @@ class NestedComponent extends Field_1.default {
      * @param {boolean} [all] - If set to TRUE will cascade remove all components.
      */
     removeComponent(component, components, all = false) {
+        var _a, _b;
         components = components || this.components;
         component.destroy(all);
         lodash_1.default.remove(components, { id: component.id });
         if (this.componentsMap[component.path]) {
             delete this.componentsMap[component.path];
         }
+        if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.componentsMap[component.path]) {
+            (_b = this.root) === null || _b === void 0 ? true : delete _b.componentsMap[component.path];
+        }
     }
     /**
      * Removes a component provided the API key of that component.
@@ -838,9 +841,6 @@ class NestedComponent extends Field_1.default {
         }
     }
     setValue(value, flags = {}) {
-        if (!value) {
-            return false;
-        }
         // If the value is equal to the empty value, then this means we need to reset the values.
         if (lodash_1.default.isEqual(value, this.emptyValue)) {
             // TO-DO: For a future major release, we need to investigate removing the need for the

package/lib/cjs/components/datagrid/DataGrid.js

@@ -496,11 +496,18 @@ class DataGridComponent extends NestedArrayComponent_1.default {
             options.row = `${rowIndex}-${colIndex}`;
             options.rowIndex = rowIndex;
             options.onChange = (flags, changed, modified) => {
+                var _a, _b;
                 if (changed.component.type === 'form') {
                     const formComp = (0, utils_1.getComponent)(this.component.components, changed.component.key);
                     lodash_1.default.set(formComp, 'components', changed.component.components);
                 }
-                this.triggerChange({ modified });
+                // If we're in a nested form we need to ensure our changes are triggered upstream
+                if (((_a = changed.instance.root) === null || _a === void 0 ? void 0 : _a.id) && (((_b = this.root) === null || _b === void 0 ? void 0 : _b.id) !== changed.instance.root.id)) {
+                    changed.instance.root.triggerChange(flags, changed, modified);
+                }
+                else {
+                    this.triggerChange({ modified });
+                }
             };
             let columnComponent;
             if (this.builderMode) {

package/lib/cjs/components/editgrid/EditGrid.d.ts

@@ -73,10 +73,10 @@ export default class EditGridComponent extends NestedArrayComponent {
         rowIndex: any;
     } | undefined;
     emptyRow: any;
-    addRowModal(rowIndex: any): Promise<any>;
+    addRowModal(rowIndex: any): Promise<void> | Promise<any[]>;
     alert: Alert | null | undefined;
     showDialog(rowIndex: any): Promise<any>;
-    editRow(rowIndex: any): Promise<any>;
+    editRow(rowIndex: any): Promise<void> | Promise<any[]>;
     clearErrors(rowIndex: any): void;
     cancelRow(rowIndex: any): void;
     saveRow(rowIndex: any, modified: any): boolean | undefined;

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

@@ -29,7 +29,7 @@ export default class FormComponent extends Component {
      * Prints out the value of form components as a datagrid value.
      */
     getValueAsString(value: any, options: any): any;
-    attach(element: any): Promise<void>;
+    attach(element: any): Promise<any>;
     get hasLoadedForm(): any;
     get isRevisionChanged(): any;
     get subFormData(): any;

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

@@ -290,29 +290,34 @@ 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.calculateValue();
+                postAttach();
             });
         });
     }

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

@@ -144,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.

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/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

@@ -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;

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/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.

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) {
@@ -1082,7 +1090,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);

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/components/_classes/nested/NestedComponent.d.ts

@@ -155,7 +155,7 @@ export default class NestedComponent extends Field {
      * @param {import('@formio/core').Component[]} components - The components to attach logic to.
      */
     attachComponentsLogic(components: import('@formio/core').Component[]): void;
-    attachComponents(element: any, components: any, container: any): Promise<any>;
+    attachComponents(element: any, components: any, container: any): Promise<void> | Promise<any[]>;
     /**
      * Remove a component from the components array and from the children object
      * @param {import('@formio/core').Component} component - The component to remove from the components.

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

@@ -534,8 +534,7 @@ export default class NestedComponent extends Field {
         container = container || this.component.components;
         element = this.hook('attachComponents', element, components, container, this);
         if (!element) {
-            // Return a non-resolving promise.
-            return (new Promise(() => { }));
+            return Promise.resolve();
         }
         let index = 0;
         const promises = [];
@@ -560,6 +559,9 @@ export default class NestedComponent extends Field {
         if (this.componentsMap[component.path]) {
             delete this.componentsMap[component.path];
         }
+        if (this.root?.componentsMap[component.path]) {
+            delete this.root?.componentsMap[component.path];
+        }
     }
     /**
      * Removes a component provided the API key of that component.
@@ -833,9 +835,6 @@ export default class NestedComponent extends Field {
         }
     }
     setValue(value, flags = {}) {
-        if (!value) {
-            return false;
-        }
         // If the value is equal to the empty value, then this means we need to reset the values.
         if (_.isEqual(value, this.emptyValue)) {
             // TO-DO: For a future major release, we need to investigate removing the need for the

package/lib/mjs/components/datagrid/DataGrid.js

@@ -496,7 +496,13 @@ export default class DataGridComponent extends NestedArrayComponent {
                     const formComp = getComponent(this.component.components, changed.component.key);
                     _.set(formComp, 'components', changed.component.components);
                 }
-                this.triggerChange({ modified });
+                // If we're in a nested form we need to ensure our changes are triggered upstream
+                if (changed.instance.root?.id && (this.root?.id !== changed.instance.root.id)) {
+                    changed.instance.root.triggerChange(flags, changed, modified);
+                }
+                else {
+                    this.triggerChange({ modified });
+                }
             };
             let columnComponent;
             if (this.builderMode) {

package/lib/mjs/components/editgrid/EditGrid.d.ts

@@ -73,10 +73,10 @@ export default class EditGridComponent extends NestedArrayComponent {
         rowIndex: any;
     } | undefined;
     emptyRow: any;
-    addRowModal(rowIndex: any): Promise<any>;
+    addRowModal(rowIndex: any): Promise<void> | Promise<any[]>;
     alert: Alert | null | undefined;
     showDialog(rowIndex: any): Promise<any>;
-    editRow(rowIndex: any): Promise<any>;
+    editRow(rowIndex: any): Promise<void> | Promise<any[]>;
     clearErrors(rowIndex: any): void;
     cancelRow(rowIndex: any): void;
     saveRow(rowIndex: any, modified: any): boolean | undefined;

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

@@ -29,7 +29,7 @@ export default class FormComponent extends Component {
      * Prints out the value of form components as a datagrid value.
      */
     getValueAsString(value: any, options: any): any;
-    attach(element: any): Promise<void>;
+    attach(element: any): Promise<any>;
     get hasLoadedForm(): any;
     get isRevisionChanged(): any;
     get subFormData(): any;

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

@@ -286,29 +286,34 @@ export default class FormComponent extends Component {
                     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(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(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);
-                    this.subForm.element = this.componentModal.refs.componentContent || this.subForm.element;
-                    this.setOpenModalElement();
+                        postAttach();
+                    });
                 }
-                this.calculateValue();
+                postAttach();
             });
         });
     }

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

@@ -144,7 +144,7 @@ export default class RadioComponent extends ListComponent {
         });
         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.

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

@@ -158,6 +158,13 @@ export default class TagsComponent extends Input {
             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/mjs/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/mjs/utils/index.d.ts

@@ -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;

package/lib/mjs/widgets/CalendarWidget.js

@@ -115,7 +115,14 @@ export default class CalendarWidget extends InputWidget {
                 if (this._input) {
                     const { locale } = this.settings;
                     if (locale && locale.length >= 2 && locale !== 'en') {
-                        return Formio.requireLibrary(`flatpickr-${locale}`, `flatpickr.l10ns.${locale}`, `${Formio.cdn['flatpickr']}/l10n/${locale}.js`, true).then(() => this.initFlatpickr(Flatpickr));
+                        return Formio.requireLibrary(`flatpickr-${locale}`, `flatpickr.l10ns.${locale}`, `${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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.1.0-dev.6194.87d4d3f",
+  "version": "5.1.0-dev.6204.b833c7c",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -81,7 +81,7 @@
   "homepage": "https://github.com/formio/formio.js#readme",
   "dependencies": {
     "@formio/bootstrap": "v3.0.0-dev.121.085d187",
-    "@formio/core": "2.4.0-dev.267.2866472",
+    "@formio/core": "2.5.1-rc.6",
     "@formio/text-mask-addons": "3.8.0-formio.4",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",