@formio/js 5.2.1-rc.9 → 5.2.1

package/dist/formio.utils.min.js.LICENSE.txt

@@ -20,7 +20,7 @@
 
 /*! @license DOMPurify 3.2.4 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.4/LICENSE */
 
-/*! formiojs v5.2.1-rc.9 | https://unpkg.com/formiojs@5.2.1-rc.9/LICENSE.txt */
+/*! formiojs v5.2.1 | https://unpkg.com/formiojs@5.2.1/LICENSE.txt */
 
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
 

package/lib/cjs/Element.js

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

package/lib/cjs/Embed.js

@@ -418,7 +418,7 @@ Formio.formioReady = new Promise((ready, reject) => {
     _a._formioReady = ready;
     _a._formioReadyReject = reject;
 });
-Formio.version = '5.2.1-rc.9';
+Formio.version = '5.2.1';
 // Create a report.
 Formio.Report = {
     create: (element, submission, options = {}) => __awaiter(void 0, void 0, void 0, function* () {

package/lib/cjs/Formio.js

@@ -11,7 +11,7 @@ const CDN_1 = __importDefault(require("./CDN"));
 const providers_1 = __importDefault(require("./providers"));
 sdk_1.Formio.cdn = new CDN_1.default();
 sdk_1.Formio.Providers = providers_1.default;
-sdk_1.Formio.version = '5.2.1-rc.9';
+sdk_1.Formio.version = '5.2.1';
 CDN_1.default.defaultCDN = sdk_1.Formio.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';
 const isNil = (val) => val === null || val === undefined;
 sdk_1.Formio.prototype.uploadFile = function (storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback, multipartOptions) {

package/lib/cjs/WebformBuilder.d.ts

@@ -77,6 +77,7 @@ export default class WebformBuilder extends Component {
     removeComponent(component: any, parent: any, original: any, componentInstance: any): boolean | undefined;
     replaceDoubleQuotes(data: any, fieldsToRemoveDoubleQuotes?: any[]): any;
     updateComponent(component: any, changed: any): void;
+    originalDefaultValue: any;
     findComponentsWithRepeatablePaths(): any[];
     highlightInvalidComponents(): void;
     /**

package/lib/cjs/WebformBuilder.js

@@ -1089,6 +1089,17 @@ class WebformBuilder extends Component_1.default {
                     'fields.month.required',
                     'fields.year.required',
                 ]));
+                if (defaultValueComponent.component.components) {
+                    if (!this.originalDefaultValue) {
+                        this.originalDefaultValue = (0, utils_1.fastCloneDeep)(defaultValueComponent.component);
+                    }
+                    (0, utils_1.eachComponent)(defaultValueComponent.component.components, (comp => {
+                        var _a;
+                        if ((_a = comp.validate) === null || _a === void 0 ? void 0 : _a.required) {
+                            comp.validate.required = false;
+                        }
+                    }));
+                }
                 const parentComponent = defaultValueComponent.parent;
                 let tabIndex = -1;
                 let index = -1;
@@ -1198,6 +1209,10 @@ class WebformBuilder extends Component_1.default {
         if (index !== -1) {
             let submissionData = this.editForm.submission.data;
             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);
             this.hook('beforeSaveComponentSettings', submissionData);

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();
@@ -936,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/WizardBuilder.js

@@ -183,6 +183,10 @@ class WizardBuilder extends WebformBuilder_1.default {
         this.navigationDragula = null;
         super.detach();
     }
+    destroy(all = false) {
+        this.off('saveComponent');
+        super.destroy(all);
+    }
     rebuild() {
         var _a;
         const page = this.currentPage;

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 = [];
@@ -840,6 +839,9 @@ 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/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;
@@ -42,6 +42,7 @@ export default class FormComponent extends Component {
     everyComponent(...args: any[]): any;
     setSubFormDisabled(subForm: any): void;
     updateSubWizards(subForm: any): void;
+    setComponentsMap(): void;
     /**
      * Create a subform instance.
      * @param {boolean} [fromAttach] - This function is being called from an `attach` method.

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

@@ -289,29 +289,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();
             });
         });
     }
@@ -389,6 +395,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.
@@ -414,9 +428,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/select/Select.js

@@ -1123,7 +1123,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; } });
@@ -29,6 +29,7 @@ exports.EventEmitter = EventEmitter_1.default;
 const Webform_1 = __importDefault(require("./Webform"));
 exports.Webform = Webform_1.default;
 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/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;
@@ -163,6 +163,7 @@ declare const FormioUtils: {
 };
 import { Evaluator } from './Evaluator';
 import { registerEvaluator } from './Evaluator';
+import { DefaultEvaluator } from './Evaluator';
 import { interpolate } from './Evaluator';
 import moment from 'moment';
-export { FormioUtils as Utils, Evaluator, registerEvaluator };
+export { FormioUtils as Utils, Evaluator, registerEvaluator, DefaultEvaluator };

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.DefaultEvaluator = exports.registerEvaluator = 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/mjs/Element.js

@@ -523,9 +523,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/Embed.js

@@ -14,7 +14,7 @@ export class Formio {
         Formio._formioReady = ready;
         Formio._formioReadyReject = reject;
     });
-    static version = '5.2.1-rc.9';
+    static version = '5.2.1';
     static setLicense(license, norecurse = false) {
         Formio.license = license;
         if (!norecurse && Formio.FormioClass) {

package/lib/mjs/Formio.js

@@ -4,7 +4,7 @@ import CDN from './CDN';
 import Providers from './providers';
 FormioCore.cdn = new CDN();
 FormioCore.Providers = Providers;
-FormioCore.version = '5.2.1-rc.9';
+FormioCore.version = '5.2.1';
 CDN.defaultCDN = FormioCore.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';
 const isNil = (val) => val === null || val === undefined;
 FormioCore.prototype.uploadFile = function (storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback, multipartOptions) {

package/lib/mjs/WebformBuilder.d.ts

@@ -77,6 +77,7 @@ export default class WebformBuilder extends Component {
     removeComponent(component: any, parent: any, original: any, componentInstance: any): boolean | undefined;
     replaceDoubleQuotes(data: any, fieldsToRemoveDoubleQuotes?: any[]): any;
     updateComponent(component: any, changed: any): void;
+    originalDefaultValue: any;
     findComponentsWithRepeatablePaths(): any[];
     highlightInvalidComponents(): void;
     /**

package/lib/mjs/WebformBuilder.js

@@ -1073,6 +1073,16 @@ export default class WebformBuilder extends Component {
                     'fields.month.required',
                     'fields.year.required',
                 ]));
+                if (defaultValueComponent.component.components) {
+                    if (!this.originalDefaultValue) {
+                        this.originalDefaultValue = fastCloneDeep(defaultValueComponent.component);
+                    }
+                    eachComponent(defaultValueComponent.component.components, (comp => {
+                        if (comp.validate?.required) {
+                            comp.validate.required = false;
+                        }
+                    }));
+                }
                 const parentComponent = defaultValueComponent.parent;
                 let tabIndex = -1;
                 let index = -1;
@@ -1181,6 +1191,10 @@ export default class WebformBuilder extends Component {
         if (index !== -1) {
             let submissionData = this.editForm.submission.data;
             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);
             this.hook('beforeSaveComponentSettings', submissionData);

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();
@@ -924,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/_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 = [];
@@ -834,6 +833,9 @@ 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/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;
@@ -42,6 +42,7 @@ export default class FormComponent extends Component {
     everyComponent(...args: any[]): any;
     setSubFormDisabled(subForm: any): void;
     updateSubWizards(subForm: any): void;
+    setComponentsMap(): void;
     /**
      * Create a subform instance.
      * @param {boolean} [fromAttach] - This function is being called from an `attach` method.

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

@@ -286,29 +286,35 @@ 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.setComponentsMap();
+                    });
                 }
-                this.calculateValue();
+                postAttach();
             });
         });
     }
@@ -384,6 +390,14 @@ export default class FormComponent extends Component {
             this.emit('subWizardsUpdated', subForm);
         }
     }
+    setComponentsMap() {
+        if (!this.subForm) {
+            return;
+        }
+        const componentsMap = this.componentsMap;
+        const formComponentsMap = this.subForm.componentsMap;
+        _.assign(componentsMap, formComponentsMap);
+    }
     /**
      * Create a subform instance.
      * @param {boolean} [fromAttach] - This function is being called from an `attach` method.
@@ -408,9 +422,7 @@ export default class FormComponent extends Component {
                 this.subForm = instance;
                 this.subForm.currentForm = this;
                 this.subForm.parentVisible = this.visible;
-                const componentsMap = this.componentsMap;
-                const formComponentsMap = this.subForm.componentsMap;
-                _.assign(componentsMap, formComponentsMap);
+                this.setComponentsMap();
                 this.component.components = this.subForm._form?.components;
                 this.component.display = this.subForm._form?.display;
                 this.subForm.on('change', () => {

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

@@ -1153,7 +1153,7 @@ export default class SelectComponent extends ListComponent {
         }
         // 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/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 '';