@formio/js 5.1.0-dev.5974.1be1688 → 5.1.0-dev.5976.f61da27

package/lib/mjs/Form.js

@@ -51,7 +51,7 @@ export default class Form extends Element {
      * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
      * @property {boolean} [readOnly] - Set this form to readOnly.
      * @property {boolean} [noAlerts] - Disable the alerts dialog.
-     * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.
+     * @property {Record<string, Record<string, string>>} [i18n] - The translation file for this rendering.
      * @property {string} [template] - Custom logic for creation of elements.
      * @property {boolean} [noDefaults] - Exclude default values from the settings.
      * @property {any} [fileService] - The file service for this form.
@@ -350,7 +350,9 @@ export default class Form extends Element {
         this.form.display = display;
         this.instance.destroy();
         this.instance = this.create(display);
-        return this.setForm(this.form);
+        return this.setForm(this.form).then(() => {
+            this.instance.emit('setDisplay', this.form.display);
+        });
     }
     empty() {
         if (this.element) {

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.1.0-dev.1';
+FormioCore.version = '5.1.0-dev.2';
 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/PDFBuilder.js

@@ -294,7 +294,7 @@ export default class PDFBuilder extends WebformBuilder {
                     height: schema.height,
                     width: schema.width
                 };
-                if (!this.options.noNewEdit && !component.component.noNewEdit) {
+                if (!this.options.noNewEdit && !component.component.noNewEdit && this.hasEditTabs(component.type)) {
                     this.editComponent(component.component, this.getParentContainer(component), isNew);
                 }
                 this.emit('updateComponent', component.component);
@@ -318,7 +318,7 @@ export default class PDFBuilder extends WebformBuilder {
         });
         this.webform.on('iframe-componentClick', schema => {
             const component = this.webform.getComponentById(schema.id);
-            if (component) {
+            if (component && this.hasEditTabs(component.type)) {
                 this.editComponent(component.component, this.getParentContainer(component));
             }
         }, true);

package/lib/mjs/Webform.d.ts

@@ -190,7 +190,10 @@ declare class Webform extends NestedDataComponent {
     get language(): string;
     root: this;
     localRoot: this;
+    beforeInit(): void;
+    executeFormController: any;
     get emptyValue(): null;
+    get shouldCallFormController(): any;
     get shadowRoot(): any;
     /**
      * Add a language for translations
@@ -360,7 +363,7 @@ declare class Webform extends NestedDataComponent {
      * @returns {Promise} - The promise that is triggered when the form is built.
      */
     init(): Promise<any>;
-    executeFormController(): false | undefined;
+    _executeFormController(): void;
     build(element: any): Promise<any>;
     getClassName(): string;
     render(): string;
@@ -452,7 +455,7 @@ declare class Webform extends NestedDataComponent {
      */
     submit(before?: boolean, options?: any): Promise<any>;
     submitUrl(URL: any, headers: any): void;
-    triggerCaptcha(): void;
+    triggerCaptcha(components?: null): void;
     _nosubmit: any;
     get conditions(): any;
     get variables(): any;

package/lib/mjs/Webform.js

@@ -287,12 +287,24 @@ export default class Webform extends NestedDataComponent {
         this.localRoot = this;
     }
     /* eslint-enable max-statements */
+    beforeInit() {
+        this.executeFormController = _.once(this._executeFormController);
+    }
     get language() {
         return this.options.language;
     }
     get emptyValue() {
         return null;
     }
+    get shouldCallFormController() {
+        // If no controller value or
+        // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)
+        return (this.form &&
+            this.form.controller &&
+            !((!this.visible || this.component.hidden) &&
+                this.component.clearOnHide &&
+                !this.rootPristine));
+    }
     componentContext() {
         return this._data;
     }
@@ -902,19 +914,12 @@ export default class Webform extends NestedDataComponent {
         this.on('resetForm', () => this.resetValue(), true);
         this.on('deleteSubmission', () => this.deleteSubmission(), true);
         this.on('refreshData', () => this.updateValue(), true);
-        this.executeFormController();
+        if (this.shouldCallFormController) {
+            this.executeFormController();
+        }
         return this.formReady;
     }
-    executeFormController() {
-        // If no controller value or
-        // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)
-        if (!this.form ||
-            !this.form.controller ||
-            ((!this.visible || this.component.hidden) &&
-                this.component.clearOnHide &&
-                !this.rootPristine)) {
-            return false;
-        }
+    _executeFormController() {
         this.formReady.then(() => {
             this.evaluate(this.form.controller, {
                 components: this.components,
@@ -1529,18 +1534,28 @@ export default class Webform extends NestedDataComponent {
             return console.warn(message);
         }
     }
-    triggerCaptcha() {
-        if (!this || !this.components) {
+    triggerCaptcha(components = null) {
+        if (!this || !this.components || this.options.preview) {
             return;
         }
         const captchaComponent = [];
-        this.eachComponent((component) => {
+        eachComponent(components || this.components, (component) => {
             if (/^(re)?captcha$/.test(component.type) && component.component.eventType === 'formLoad') {
                 captchaComponent.push(component);
             }
-        });
+        }, true);
         if (captchaComponent.length > 0) {
-            captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);
+            if (captchaComponent[0].component.provider === 'google' && components) {
+                return;
+            }
+            if (this.parent) {
+                this.parent.subFormReady.then(() => {
+                    captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);
+                });
+            }
+            else {
+                captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);
+            }
         }
     }
     set nosubmit(value) {

package/lib/mjs/WebformBuilder.d.ts

@@ -123,6 +123,7 @@ export default class WebformBuilder extends Component {
     addBuilderGroup(name: any, group: any): void;
     updateBuilderGroup(name: any, group: any): void;
     generateKey(info: any): any;
+    hasEditTabs(type: any): boolean;
 }
 import Component from './components/_classes/component/Component';
 import Webform from './Webform';

package/lib/mjs/WebformBuilder.js

@@ -115,7 +115,9 @@ export default class WebformBuilder extends Component {
                 html,
                 disableBuilderActions: self?.component?.disableBuilderActions,
                 childComponent: component,
-                design: self?.options?.design
+                design: self?.options?.design,
+                editJson: self?.options?.editJson,
+                editComponent: this.hasEditTabs(component.type)
             });
         };
         this.options.hooks.renderComponents = (html, { components, self }) => {
@@ -840,7 +842,11 @@ export default class WebformBuilder extends Component {
             parent.addChildComponent(info, element, target, source, sibling);
         }
         const componentInDataGrid = parent.type === 'datagrid';
-        if (isNew && !this.options.noNewEdit && !info.noNewEdit && !(this.options.design && info.type === 'reviewpage')) {
+        if (isNew
+            && !this.options.noNewEdit
+            && !info.noNewEdit
+            && this.hasEditTabs(info.type)
+            && !(this.options.design && info.type === 'reviewpage')) {
             this.editComponent(info, target, isNew, null, null, { inDataGrid: componentInDataGrid });
         }
         // Only rebuild the parts needing to be rebuilt.
@@ -1619,4 +1625,9 @@ export default class WebformBuilder extends Component {
             info.placeholder ||
             info.type);
     }
+    hasEditTabs(type) {
+        const editTabs = getComponent(Components.components[type].editForm().components, 'tabs', true).components;
+        const hiddenEditTabs = _.filter(_.get(this.options, `editForm.${type}`, []), 'ignore');
+        return _.intersectionBy(editTabs, hiddenEditTabs, 'key').length !== editTabs.length;
+    }
 }

package/lib/mjs/Wizard.js

@@ -594,6 +594,7 @@ export default class Wizard extends Webform {
             }
             this.redraw().then(() => {
                 this.checkData(this.submission.data);
+                this.triggerCaptcha(this.currentPanel.components);
                 const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();
                 if (this.alert) {
                     this.showErrors(errors, true, true);
@@ -657,7 +658,7 @@ export default class Wizard extends Webform {
         return this.page - 1;
     }
     beforeSubmit() {
-        const pages = this.getPages();
+        const pages = this.getPages({ all: true });
         return Promise.all(pages.map((page) => {
             page.options.beforeSubmit = true;
             return page.beforeSubmit();

package/lib/mjs/WizardBuilder.js

@@ -255,10 +255,23 @@ export default class WizardBuilder extends WebformBuilder {
         if (component instanceof WizardBuilder) {
             return;
         }
+        if (!window.sessionStorage) {
+            return console.warn(this.t('sessionStorageSupportError'));
+        }
+        // If pasting after the Wizard's page, check if a full Wizard page was copied and pass it to addPage method
         if (this._form.components.find(comp => _.isEqual(component.component, comp))) {
-            this.addPage(component);
+            const data = window.sessionStorage.getItem('formio.clipboard');
+            if (data) {
+                const schema = JSON.parse(data);
+                // If the copied component is not a Wizard's page, do nothing since we can't paste outside the panel in Wizard
+                if (schema.type !== 'panel') {
+                    return;
+                }
+                this.addPage(schema);
+            }
         }
         else {
+            // If we are not trying to paster after the current Wizard's page, just pass it to the WebformBuilder
             return super.pasteComponent(component);
         }
     }

package/lib/mjs/components/Components.d.ts

@@ -2,6 +2,7 @@ export default class Components {
     static _editFormUtils: {
         sortAndFilterComponents(components: any): any;
         unifyComponents(objValue: any, srcValue: any): any;
+        tokenVariableDescription(): string;
         logicVariablesTable(additional: any): {
             type: string;
             tag: string;
@@ -86,6 +87,7 @@ export default class Components {
     static set EditFormUtils(value: {
         sortAndFilterComponents(components: any): any;
         unifyComponents(objValue: any, srcValue: any): any;
+        tokenVariableDescription(): string;
         logicVariablesTable(additional: any): {
             type: string;
             tag: string;
@@ -169,6 +171,7 @@ export default class Components {
     static get EditFormUtils(): {
         sortAndFilterComponents(components: any): any;
         unifyComponents(objValue: any, srcValue: any): any;
+        tokenVariableDescription(): string;
         logicVariablesTable(additional: any): {
             type: string;
             tag: string;

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

@@ -161,6 +161,7 @@ export default class Component extends Element {
             properties: {},
             allowMultipleMasks: false,
             addons: [],
+            serverOverride: {},
         }, ...sources);
     }
     /**
@@ -418,6 +419,9 @@ export default class Component extends Element {
         // Allow anyone to hook into the component creation.
         this.hook('component');
         if (!this.options.skipInit) {
+            if (typeof this.beforeInit === 'function') {
+                this.beforeInit();
+            }
             this.init();
         }
     }
@@ -1264,7 +1268,7 @@ export default class Component extends Element {
     detach() {
         // First iterate through each ref and delete the component so there are no dangling component references.
         _.each(this.refs, (ref) => {
-            if (typeof ref === NodeList) {
+            if (ref instanceof NodeList) {
                 ref.forEach((elem) => {
                     delete elem.component;
                 });
@@ -1914,15 +1918,21 @@ export default class Component extends Element {
         }
         // Check advanced conditions (and cache the result)
         const isConditionallyHidden = this.checkConditionallyHidden(data, row) || this._parentConditionallyHidden;
+        let shouldClear = false;
         if (isConditionallyHidden !== this._conditionallyHidden) {
             this._conditionallyHidden = isConditionallyHidden;
-            this.clearOnHide();
+            shouldClear = true;
         }
         // Check visibility
         const visible = (this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden);
         if (this.visible !== visible) {
             this.visible = visible;
         }
+        // Wait for visibility to update for nested components, so the component state is up-to-date when
+        // calling clearOnHide
+        if (shouldClear) {
+            this.clearOnHide();
+        }
         return visible;
     }
     /**

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

@@ -45,6 +45,6 @@ export default [
     },
     EditFormUtils.javaScriptValue('Advanced Conditions', 'customConditional', 'conditional.json', 110, '<p>You must assign the <strong>show</strong> variable a boolean result.</p>' +
         '<p><strong>Note: Advanced Conditional logic will override the results of the Simple Conditional logic.</strong></p>' +
-        '<h5>Example</h5><pre>show = !!data.showMe;</pre>', '<p><a href="https://help.form.io/userguide/form-building/logic-and-conditions" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>')
+        '<h5>Example</h5><pre>show = !!data.showMe;</pre>', '<p><a href="https://help.form.io/userguide/form-building/logic-and-conditions" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>', EditFormUtils.tokenVariableDescription())
 ];
 /* eslint-enable quotes, max-len */

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

@@ -87,6 +87,9 @@ declare const _default: ({
     valueProperty?: undefined;
     data?: undefined;
     conditional?: undefined;
+    as?: undefined;
+    editor?: undefined;
+    description?: undefined;
 } | {
     type: string;
     label: string;
@@ -103,6 +106,9 @@ declare const _default: ({
     valueProperty?: undefined;
     data?: undefined;
     conditional?: undefined;
+    as?: undefined;
+    editor?: undefined;
+    description?: undefined;
 } | {
     weight: number;
     type: string;
@@ -125,6 +131,9 @@ declare const _default: ({
     valueProperty?: undefined;
     data?: undefined;
     conditional?: undefined;
+    as?: undefined;
+    editor?: undefined;
+    description?: undefined;
 } | {
     weight: number;
     type: string;
@@ -173,6 +182,9 @@ declare const _default: ({
     valueProperty?: undefined;
     data?: undefined;
     conditional?: undefined;
+    as?: undefined;
+    editor?: undefined;
+    description?: undefined;
 } | {
     type: string;
     input: boolean;
@@ -200,6 +212,9 @@ declare const _default: ({
     defaultValue?: undefined;
     values?: undefined;
     logic?: undefined;
+    as?: undefined;
+    editor?: undefined;
+    description?: undefined;
 } | {
     weight: number;
     type: string;
@@ -216,5 +231,27 @@ declare const _default: ({
     valueProperty?: undefined;
     data?: undefined;
     conditional?: undefined;
+    as?: undefined;
+    editor?: undefined;
+    description?: undefined;
+} | {
+    type: string;
+    as: string;
+    editor: string;
+    weight: number;
+    input: boolean;
+    key: string;
+    label: string;
+    tooltip: string;
+    defaultValue: {};
+    description: string;
+    placeholder?: undefined;
+    inline?: undefined;
+    values?: undefined;
+    logic?: undefined;
+    dataSrc?: undefined;
+    valueProperty?: undefined;
+    data?: undefined;
+    conditional?: undefined;
 })[];
 export default _default;

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

@@ -135,7 +135,7 @@ export default [
         input: true
     },
     EditFormUtils.javaScriptValue('Custom Default Value', 'customDefaultValue', 'customDefaultValue', 1000, '<p><h4>Example:</h4><pre>value = data.firstName + " " + data.lastName;</pre></p>', '<p><h4>Example:</h4><pre>{"cat": [{"var": "data.firstName"}, " ", {"var": "data.lastName"}]}</pre>'),
-    EditFormUtils.javaScriptValue('Calculated Value', 'calculateValue', 'calculateValue', 1100, '<p><h4>Example:</h4><pre>value = data.a + data.b + data.c;</pre></p>', '<p><h4>Example:</h4><pre>{"+": [{"var": "data.a"}, {"var": "data.b"}, {"var": "data.c"}]}</pre><p><a href="https://help.form.io/userguide/form-building/logic-and-conditions#calculated-values" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>', '<tr><th>token</th><td>The decoded JWT token for the authenticated user.</td></tr>'),
+    EditFormUtils.javaScriptValue('Calculated Value', 'calculateValue', 'calculateValue', 1100, '<p><h4>Example:</h4><pre>value = data.a + data.b + data.c;</pre></p>', '<p><h4>Example:</h4><pre>{"+": [{"var": "data.a"}, {"var": "data.b"}, {"var": "data.c"}]}</pre><p><a href="https://help.form.io/userguide/form-building/logic-and-conditions#calculated-values" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>', EditFormUtils.tokenVariableDescription()),
     {
         type: 'checkbox',
         input: true,
@@ -152,5 +152,16 @@ export default [
         label: 'Allow Manual Override of Calculated Value',
         tooltip: 'When checked, this will allow the user to manually override the calculated value.'
     },
+    {
+        type: 'textarea',
+        as: 'json',
+        editor: 'ace',
+        weight: 1400,
+        input: true,
+        key: 'serverOverride',
+        label: 'Server Override',
+        tooltip: 'A JSON object containing the component settings that should be overriden when the form submission is processed on the server side.',
+        defaultValue: {},
+        description: '<b>Example</b>: { "clearOnHide": true }',
+    }
 ];
-/* eslint-enable max-len */

package/lib/mjs/components/_classes/component/editForm/utils.d.ts

@@ -2,6 +2,7 @@ export default EditFormUtils;
 declare namespace EditFormUtils {
     function sortAndFilterComponents(components: any): any;
     function unifyComponents(objValue: any, srcValue: any): any;
+    function tokenVariableDescription(): string;
     function logicVariablesTable(additional: any): {
         type: string;
         tag: string;

package/lib/mjs/components/_classes/component/editForm/utils.js

@@ -32,6 +32,9 @@ const EditFormUtils = {
         }
         return _.isEqual(objValue, srcValue);
     },
+    tokenVariableDescription() {
+        return '<tr><th>token</th><td>The decoded JWT token for the authenticated user.</td></tr>';
+    },
     logicVariablesTable(additional) {
         additional = additional || '';
         return {

package/lib/mjs/components/_classes/nesteddata/NestedDataComponent.d.ts

@@ -3,6 +3,7 @@ export default class NestedDataComponent extends NestedComponent {
     hasChanged(newValue: any, oldValue: any): boolean;
     get allowData(): boolean;
     get emptyValue(): {};
+    get shouldAddDefaultValue(): boolean;
     componentContext(): any;
     getValueAsString(value: any, options: any): string;
     getDataValueAsTable(value: any, options: any): string;

package/lib/mjs/components/_classes/nesteddata/NestedDataComponent.js

@@ -22,6 +22,9 @@ export default class NestedDataComponent extends NestedComponent {
     get emptyValue() {
         return {};
     }
+    get shouldAddDefaultValue() {
+        return !this.options.noDefaults || !this.options.server;
+    }
     componentContext() {
         return this.dataValue;
     }

package/lib/mjs/components/address/Address.js

@@ -214,7 +214,7 @@ export default class AddressComponent extends ContainerComponent {
         super.dataValue = value;
     }
     get dataValue() {
-        const resultValue = _.get(this._data, this.component.path);
+        const resultValue = _.get(this._data, this.path);
         if (!_.isArray(resultValue) && this.component.multiple) {
             return [resultValue];
         }

package/lib/mjs/components/datetime/DateTime.d.ts

@@ -20,6 +20,6 @@ export default class DateTimeComponent extends Input {
     get momentFormat(): string;
     createWrapper(): boolean;
     checkValidity(data: any, dirty: any, rowData: any): boolean;
-    getValueAsString(value: any): any;
+    getValueAsString(value: any, options: any): any;
 }
 import Input from '../_classes/input/Input';

package/lib/mjs/components/datetime/DateTime.js

@@ -128,8 +128,8 @@ export default class DateTimeComponent extends Input {
             ...customOptions,
         };
         // update originalComponent to include widget and other updated settings
-        // it is done here since these settings depend on properties present after the component is initialized 
-        // originalComponent is used to restore the component (and widget) after evaluating field logic 
+        // it is done here since these settings depend on properties present after the component is initialized
+        // originalComponent is used to restore the component (and widget) after evaluating field logic
         this.originalComponent = fastCloneDeep(this.component);
         /* eslint-enable camelcase */
     }
@@ -177,15 +177,15 @@ export default class DateTimeComponent extends Input {
         }
         return super.checkValidity(data, dirty, rowData);
     }
-    getValueAsString(value) {
+    getValueAsString(value, options) {
         let format = FormioUtils.convertFormatToMoment(this.component.format);
         format += format.match(/z$/) ? '' : ' z';
         const timezone = this.timezone;
         if (value && !this.attached && timezone) {
             if (Array.isArray(value) && this.component.multiple) {
-                return value.map(item => _.trim(FormioUtils.momentDate(item, format, timezone).format(format))).join(', ');
+                return value.map(item => _.trim(FormioUtils.momentDate(item, format, timezone, options).format(format))).join(', ');
             }
-            return _.trim(FormioUtils.momentDate(value, format, timezone).format(format));
+            return _.trim(FormioUtils.momentDate(value, format, timezone, options).format(format));
         }
         if (Array.isArray(value) && this.component.multiple) {
             return value.map(item => _.trim(moment(item).format(format))).join(', ');

package/lib/mjs/components/day/Day.js

@@ -53,11 +53,13 @@ export default class DayComponent extends Field {
     // Empty value used before 9.3.x
     static oldEmptyValue = '00/00/0000';
     constructor(component, options, data) {
-        if (component.maxDate && component.maxDate.indexOf('moment(') === -1) {
-            component.maxDate = moment(component.maxDate, 'YYYY-MM-DD').toISOString();
-        }
-        if (component.minDate && component.minDate.indexOf('moment(') === -1) {
-            component.minDate = moment(component.minDate, 'YYYY-MM-DD').toISOString();
+        if (!options.inFormBuilder && !options.building) {
+            if (component.maxDate && component.maxDate.indexOf('moment(') === -1) {
+                component.maxDate = moment(component.maxDate, 'YYYY-MM-DD').toISOString();
+            }
+            if (component.minDate && component.minDate.indexOf('moment(') === -1) {
+                component.minDate = moment(component.minDate, 'YYYY-MM-DD').toISOString();
+            }
         }
         super(component, options, data);
     }

package/lib/mjs/components/file/File.js

@@ -98,7 +98,8 @@ export default class FileComponent extends Field {
         if (this.component.privateDownload) {
             fileInfo.private = true;
         }
-        return this.fileService.downloadFile(fileInfo).then((result) => result.url);
+        // pass the component to the downloadFile method
+        return this.fileService.downloadFile(fileInfo, this.component).then((result) => result.url);
     }
     get emptyValue() {
         return [];

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

@@ -45,16 +45,18 @@ export default class FormComponent extends Component {
     /**
      * Create a subform instance.
      * @param {boolean} [fromAttach] - This function is being called from an `attach` method.
+     * @param {boolean} [beforeSubmit] - This function is being called from a `beforeSubmit` method.
      * @returns {*} - The subform instance.
      */
-    createSubForm(fromAttach?: boolean | undefined): any;
+    createSubForm(fromAttach?: boolean | undefined, beforeSubmit?: boolean | undefined): any;
     hideSubmitButton(component: any): void;
     /**
      * Load the subform.
      * @param {boolean} fromAttach - This function is being called from an `attach` method.
+     * @param {boolean} beforeSubmit - This function is being called from a `beforeSubmit` method.
      * @returns {Promise} - The promise that resolves when the subform is loaded.
      */
-    loadSubForm(fromAttach: boolean): Promise<any>;
+    loadSubForm(fromAttach: boolean, beforeSubmit: boolean): Promise<any>;
     subFormLoading: boolean | undefined;
     checkComponentConditions(data: any, flags: any, row: any): any;
     calculateValue(data: any, flags: any, row: any): any;

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

@@ -375,10 +375,11 @@ export default class FormComponent extends Component {
     /**
      * Create a subform instance.
      * @param {boolean} [fromAttach] - This function is being called from an `attach` method.
+     * @param {boolean} [beforeSubmit] - This function is being called from a `beforeSubmit` method.
      * @returns {*} - The subform instance.
      */
-    createSubForm(fromAttach) {
-        this.subFormReady = this.loadSubForm(fromAttach).then((form) => {
+    createSubForm(fromAttach, beforeSubmit) {
+        this.subFormReady = this.loadSubForm(fromAttach, beforeSubmit).then((form) => {
             if (!form) {
                 return;
             }
@@ -435,10 +436,12 @@ export default class FormComponent extends Component {
     /**
      * Load the subform.
      * @param {boolean} fromAttach - This function is being called from an `attach` method.
+     * @param {boolean} beforeSubmit - This function is being called from a `beforeSubmit` method.
      * @returns {Promise} - The promise that resolves when the subform is loaded.
      */
-    loadSubForm(fromAttach) {
-        if (this.builderMode || this.conditionallyHidden || (this.isSubFormLazyLoad() && !fromAttach)) {
+    loadSubForm(fromAttach, beforeSubmit) {
+        const loadHiddenForm = beforeSubmit && !this.component.clearOnHide;
+        if (this.builderMode || (this.conditionallyHidden && !loadHiddenForm) || (this.isSubFormLazyLoad() && !fromAttach)) {
             return Promise.resolve();
         }
         if (this.hasLoadedForm && !this.isRevisionChanged &&
@@ -510,7 +513,7 @@ export default class FormComponent extends Component {
      * @returns {*|boolean} - TRUE if the subform should be submitted, FALSE if it should not.
      */
     get shouldSubmit() {
-        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.conditionallyHidden;
+        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && (!this.conditionallyHidden || !this.component.clearOnHide);
     }
     /**
      * Returns the data for the subform.
@@ -580,11 +583,23 @@ export default class FormComponent extends Component {
             this.dataValue = submission;
             return Promise.resolve(this.dataValue);
         }
-        return this.submitSubForm(false)
-            .then(() => {
-            return this.dataValue;
-        })
-            .then(() => super.beforeSubmit());
+        // we need to load a hidden form (when clearOnHide is disabled) in order to get and submit (if needed) its data
+        const loadHiddenForm = !this.subForm && !this.component.clearOnHide;
+        if ((this.isSubFormLazyLoad() || loadHiddenForm) && !this.subFormLoading) {
+            return this.createSubForm(true, true)
+                .then(this.submitSubForm(false))
+                .then(() => {
+                return this.dataValue;
+            })
+                .then(() => super.beforeSubmit());
+        }
+        else {
+            return this.submitSubForm(false)
+                .then(() => {
+                return this.dataValue;
+            })
+                .then(() => super.beforeSubmit());
+        }
     }
     isSubFormLazyLoad() {
         return this.root?._form?.display === 'wizard' && this.component.lazyLoad;