@formio/js 5.4.4-api99.0 → 5.5.1-api99.0

package/lib/cjs/components/textarea/editForm/TextArea.edit.display.d.ts

@@ -10,6 +10,9 @@ declare const _default: ({
     defaultValue?: undefined;
     dataSrc?: undefined;
     data?: undefined;
+    tag?: undefined;
+    className?: undefined;
+    content?: undefined;
     conditional?: undefined;
     valueProperty?: undefined;
     rows?: undefined;
@@ -29,6 +32,9 @@ declare const _default: ({
     defaultValue?: undefined;
     dataSrc?: undefined;
     data?: undefined;
+    tag?: undefined;
+    className?: undefined;
+    content?: undefined;
     conditional?: undefined;
     valueProperty?: undefined;
     rows?: undefined;
@@ -48,6 +54,9 @@ declare const _default: ({
     placeholder?: undefined;
     dataSrc?: undefined;
     data?: undefined;
+    tag?: undefined;
+    className?: undefined;
+    content?: undefined;
     conditional?: undefined;
     valueProperty?: undefined;
     rows?: undefined;
@@ -73,6 +82,9 @@ declare const _default: ({
     ignore?: undefined;
     placeholder?: undefined;
     defaultValue?: undefined;
+    tag?: undefined;
+    className?: undefined;
+    content?: undefined;
     conditional?: undefined;
     valueProperty?: undefined;
     rows?: undefined;
@@ -80,6 +92,37 @@ declare const _default: ({
     clearOnHide?: undefined;
     as?: undefined;
     customDefaultValue?: undefined;
+} | {
+    key: string;
+    weight: number;
+    type: string;
+    tag: string;
+    className: string;
+    content: string;
+    conditional: {
+        json: {
+            '===': (string | {
+                var: string;
+            })[];
+            '=='?: undefined;
+            or?: undefined;
+            and?: undefined;
+        };
+    };
+    ignore?: undefined;
+    input?: undefined;
+    label?: undefined;
+    tooltip?: undefined;
+    placeholder?: undefined;
+    defaultValue?: undefined;
+    dataSrc?: undefined;
+    data?: undefined;
+    valueProperty?: undefined;
+    rows?: undefined;
+    editor?: undefined;
+    clearOnHide?: undefined;
+    as?: undefined;
+    customDefaultValue?: undefined;
 } | {
     type: string;
     input: boolean;
@@ -92,8 +135,8 @@ declare const _default: ({
             '==': (string | {
                 var: string;
             })[];
-            or?: undefined;
             '==='?: undefined;
+            or?: undefined;
             and?: undefined;
         };
     };
@@ -102,6 +145,9 @@ declare const _default: ({
     defaultValue?: undefined;
     dataSrc?: undefined;
     data?: undefined;
+    tag?: undefined;
+    className?: undefined;
+    content?: undefined;
     valueProperty?: undefined;
     rows?: undefined;
     editor?: undefined;
@@ -121,8 +167,8 @@ declare const _default: ({
                     var: string;
                 })[];
             }[];
-            '=='?: undefined;
             '==='?: undefined;
+            '=='?: undefined;
             and?: undefined;
         };
     };
@@ -132,6 +178,9 @@ declare const _default: ({
     defaultValue?: undefined;
     dataSrc?: undefined;
     data?: undefined;
+    tag?: undefined;
+    className?: undefined;
+    content?: undefined;
     valueProperty?: undefined;
     rows?: undefined;
     editor?: undefined;
@@ -164,6 +213,9 @@ declare const _default: ({
     };
     ignore?: undefined;
     defaultValue?: undefined;
+    tag?: undefined;
+    className?: undefined;
+    content?: undefined;
     rows?: undefined;
     editor?: undefined;
     clearOnHide?: undefined;
@@ -191,6 +243,9 @@ declare const _default: ({
     defaultValue?: undefined;
     dataSrc?: undefined;
     data?: undefined;
+    tag?: undefined;
+    className?: undefined;
+    content?: undefined;
     valueProperty?: undefined;
     rows?: undefined;
     editor?: undefined;
@@ -221,6 +276,9 @@ declare const _default: ({
     defaultValue?: undefined;
     dataSrc?: undefined;
     data?: undefined;
+    tag?: undefined;
+    className?: undefined;
+    content?: undefined;
     valueProperty?: undefined;
     clearOnHide?: undefined;
     as?: undefined;
@@ -247,6 +305,9 @@ declare const _default: ({
     defaultValue?: undefined;
     dataSrc?: undefined;
     data?: undefined;
+    tag?: undefined;
+    className?: undefined;
+    content?: undefined;
     valueProperty?: undefined;
     rows?: undefined;
     editor?: undefined;
@@ -273,15 +334,18 @@ declare const _default: ({
                     var: string;
                 })[];
             })[];
+            '==='?: undefined;
             '=='?: undefined;
             or?: undefined;
-            '==='?: undefined;
         };
     };
     ignore?: undefined;
     defaultValue?: undefined;
     dataSrc?: undefined;
     data?: undefined;
+    tag?: undefined;
+    className?: undefined;
+    content?: undefined;
     valueProperty?: undefined;
     editor?: undefined;
     clearOnHide?: undefined;
@@ -309,8 +373,8 @@ declare const _default: ({
                     var: string;
                 })[];
             }[];
-            '=='?: undefined;
             '==='?: undefined;
+            '=='?: undefined;
             and?: undefined;
         };
     };
@@ -318,6 +382,9 @@ declare const _default: ({
     ignore?: undefined;
     placeholder?: undefined;
     defaultValue?: undefined;
+    tag?: undefined;
+    className?: undefined;
+    content?: undefined;
     valueProperty?: undefined;
     rows?: undefined;
     editor?: undefined;
@@ -340,8 +407,8 @@ declare const _default: ({
                     var: string;
                 })[];
             }[];
-            '=='?: undefined;
             '==='?: undefined;
+            '=='?: undefined;
             and?: undefined;
         };
     };
@@ -351,6 +418,9 @@ declare const _default: ({
     defaultValue?: undefined;
     dataSrc?: undefined;
     data?: undefined;
+    tag?: undefined;
+    className?: undefined;
+    content?: undefined;
     valueProperty?: undefined;
     clearOnHide?: undefined;
 })[];

package/lib/cjs/components/textarea/editForm/TextArea.edit.display.js

@@ -52,6 +52,19 @@ exports.default = [
         },
         weight: 415,
     },
+    {
+        key: 'quillInfo',
+        weight: 415,
+        type: 'htmlelement',
+        tag: 'div',
+        className: 'alert alert-info',
+        content: '<i class="fa fa-info-circle" aria-hidden="true" style="margin-right: 0.5rem;"></i>Quill will be deprecated in an upcoming release. It is recommended to select another Editor.',
+        conditional: {
+            json: {
+                '===': [{ var: 'data.editor' }, 'quill'],
+            },
+        },
+    },
     {
         type: 'checkbox',
         input: true,

package/lib/cjs/package.json

@@ -1,4 +1,4 @@
 {
     "type": "commonjs",
-    "version": "5.4.4-api99.0"
+    "version": "5.5.1-api99.0"
 }

package/lib/cjs/providers/address/GoogleAddressProvider.d.ts

@@ -78,7 +78,7 @@ export class GoogleAddressProvider extends AddressProvider {
      */
     addRequiredProviderOptions(options: AutocompleteOptions): void;
     filterPlace(place: any): {};
-    attachAutocomplete(elem: any, index: any, onSelectAddress: any): void;
+    attachAutocomplete(elem: any, index: any, onSelectAddress: any): any;
     search(): Promise<void>;
     makeRequest(): Promise<void>;
     getDisplayValue(address: any): any;

package/lib/cjs/providers/address/GoogleAddressProvider.js

@@ -175,13 +175,25 @@ class GoogleAddressProvider extends AddressProvider_1.AddressProvider {
         return filteredPlace;
     }
     attachAutocomplete(elem, index, onSelectAddress) {
-        Formio_1.Formio.libraryReady(this.getLibraryName()).then(() => {
+        return Formio_1.Formio.libraryReady(this.getLibraryName()).then(() => {
             const autocomplete = new google.maps.places.Autocomplete(elem, this.autocompleteOptions);
-            autocomplete.addListener('place_changed', () => {
+            const listener = autocomplete.addListener('place_changed', () => {
                 const place = this.filterPlace(autocomplete.getPlace());
                 place.formattedPlace = lodash_1.default.get(autocomplete, 'gm_accessors_.place.se.formattedPrediction', place[this.alternativeDisplayValueProperty]);
                 onSelectAddress(place, elem, index);
             });
+            return () => {
+                var _a;
+                if ((_a = google === null || google === void 0 ? void 0 : google.maps) === null || _a === void 0 ? void 0 : _a.event) {
+                    google.maps.event.clearInstanceListeners(autocomplete);
+                    google.maps.event.removeListener(listener);
+                }
+                document.querySelectorAll('.pac-container').forEach((node) => {
+                    if (node.parentNode) {
+                        node.parentNode.removeChild(node);
+                    }
+                });
+            };
         });
     }
     search() {

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

@@ -84,6 +84,7 @@ declare const FormioUtils: {
     checkJsonConditional(component: import("@formio/core").Component, json: import("@formio/core").JSONConditional, row: any, data: any, form: import("@formio/core").Form, onError: any): boolean;
     checkCondition(component: import("@formio/core").Component, row: any, data: any, form: import("@formio/core").Form, instance: any): boolean;
     checkTrigger(component: import("@formio/core").Component, trigger: any, row: import("@formio/core").DataObject, data: import("@formio/core").DataObject, form: import("@formio/core").Form, instance: any): boolean;
+    escapeInterpolationDataStrings(obj: any): any;
     setActionProperty(component: import("@formio/core").Component, action: any, result: string, row: import("@formio/core").DataObject, data: import("@formio/core").DataObject, instance: any): import("@formio/core").Component;
     removeHTML(str: string): string;
     unescapeHTML(str: string): string;

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

@@ -118,6 +118,13 @@ export function checkCondition(component: import('@formio/core').Component, row:
  * @returns {boolean} - TRUE if the trigger should fire; FALSE otherwise.
  */
 export function checkTrigger(component: import('@formio/core').Component, trigger: any, row: import('@formio/core').DataObject, data: import('@formio/core').DataObject, form: import('@formio/core').Form, instance: any): boolean;
+/**
+ * Recursively HTML-escape strings in submission-like objects so logic templates
+ * (e.g. dynamic labels) cannot treat user-entered values as HTML.
+ * @param {*} obj - The value to escape.
+ * @returns {*} - The same structure with strings escaped.
+ */
+export function escapeInterpolationDataStrings(obj: any): any;
 /**
  * Sets a property on a component via an executed Logic action.
  * @param {import('@formio/core').Component} component - The component to set the property on.

package/lib/cjs/utils/utils.js

@@ -3,8 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getContextComponents = exports.observeOverload = exports.withSwitch = exports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.removeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = void 0;
-exports.screenReaderSpeech = exports.announceScreenReaderMessage = exports.hasEncodedTimezone = exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports.getFocusableElements = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = void 0;
+exports.observeOverload = exports.withSwitch = exports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.removeHTML = exports.setActionProperty = exports.escapeInterpolationDataStrings = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = void 0;
+exports.screenReaderSpeech = exports.announceScreenReaderMessage = exports.hasEncodedTimezone = exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports.getFocusableElements = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = void 0;
 const lodash_1 = __importDefault(require("lodash"));
 const moment_timezone_1 = __importDefault(require("moment-timezone/moment-timezone"));
 const jstimezonedetect_1 = __importDefault(require("jstimezonedetect"));
@@ -427,6 +427,28 @@ function checkTrigger(component, trigger, row, data, form, instance) {
     return false;
 }
 exports.checkTrigger = checkTrigger;
+/**
+ * Recursively HTML-escape strings in submission-like objects so logic templates
+ * (e.g. dynamic labels) cannot treat user-entered values as HTML.
+ * @param {*} obj - The value to escape.
+ * @returns {*} - The same structure with strings escaped.
+ */
+function escapeInterpolationDataStrings(obj) {
+    if (obj === null || obj === undefined) {
+        return obj;
+    }
+    if (typeof obj === 'string') {
+        return lodash_1.default.escape(obj);
+    }
+    if (Array.isArray(obj)) {
+        return obj.map(escapeInterpolationDataStrings);
+    }
+    if (lodash_1.default.isPlainObject(obj)) {
+        return lodash_1.default.mapValues(obj, escapeInterpolationDataStrings);
+    }
+    return obj;
+}
+exports.escapeInterpolationDataStrings = escapeInterpolationDataStrings;
 /**
  * Sets a property on a component via an executed Logic action.
  * @param {import('@formio/core').Component} component - The component to set the property on.
@@ -449,11 +471,16 @@ function setActionProperty(component, action, result, row, data, instance) {
             break;
         }
         case 'string': {
+            const safeData = escapeInterpolationDataStrings(data);
+            const safeRow = escapeInterpolationDataStrings(row);
+            const safeResult = typeof result === 'string'
+                ? lodash_1.default.escape(result)
+                : escapeInterpolationDataStrings(result);
             const evalData = {
-                data,
-                row,
+                data: safeData,
+                row: safeRow,
                 component,
-                result,
+                result: safeResult,
             };
             const textValue = action.property.component ? action[action.property.component] : action.text;
             const currentValue = lodash_1.default.get(component, property, '');

package/lib/mjs/Embed.js

@@ -14,7 +14,7 @@ export class Formio {
         Formio._formioReady = ready;
         Formio._formioReadyReject = reject;
     });
-    static version = '5.4.4-api99.0';
+    static version = '5.5.1-api99.0';
     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.4.4-api99.0';
+FormioCore.version = '5.5.1-api99.0';
 CDN.defaultCDN = FormioCore.version.includes('rc')
     ? 'https://cdn.test-form.io'
     : 'https://cdn.form.io';

package/lib/mjs/PDF.js

@@ -53,6 +53,8 @@ export default class PDF extends Webform {
         });
         // Trigger when this form is ready.
         this.on('iframe-ready', () => this.iframeReadyResolve(), true);
+        // Re-emit pageEnd without the iframe- prefix for consumers tracking PDF scroll position.
+        this.on('iframe-pageEnd', (data) => this.emit('pageEnd', data), true);
     }
     render() {
         this.submitButton = this.addComponent({

package/lib/mjs/Wizard.js

@@ -122,7 +122,10 @@ export default class Wizard extends Webform {
             { name: 'cancel', method: 'cancel' },
             { name: 'previous', method: 'prevPage' },
             { name: 'next', method: 'nextPage' },
-            { name: 'submit', method: 'submit' },
+            { name: 'submit', method: 'submit', args: [false, {
+                        state: 'submitted',
+                    }],
+            },
         ].forEach((button) => {
             if (this.hasButton(button.name)) {
                 buttons[button.name] = button;
@@ -345,7 +348,7 @@ export default class Wizard extends Webform {
                 buttonElement.setAttribute('disabled', 'disabled');
                 this.setLoading(buttonElement, true);
                 // Call the button method, then re-enable the button.
-                this[button.method]()
+                this[button.method](...(button.args || []))
                     .then(() => {
                     buttonElement.removeAttribute('disabled');
                     this.setLoading(buttonElement, false);

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

@@ -196,7 +196,14 @@ declare class Component extends Element {
         tooltipClass: string;
         for: any;
     };
+    getFieldsetLegendData(): {
+        legendIds: string[];
+        legendLabels: string[];
+    };
     getFieldsetLegendIds(): string;
+    getViewAccessibleLabel(): string;
+    getFormattedViewAccessibleLabel(): string;
+    applyViewAccessibleAriaLabel(attributes?: {}): void;
     init(): void;
     /**
      * Disable this component.

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

@@ -526,16 +526,42 @@ export default class Component extends Element {
         }
         return label;
     }
-    getFieldsetLegendIds() {
+    getFieldsetLegendData() {
         const legendIds = [];
+        const legendLabels = [];
         let currentParent = this.parent;
         while (currentParent) {
             if (currentParent.component?.type === 'fieldset' && currentParent.component?.legend) {
                 legendIds.push(`l-${currentParent.id}-legend`);
+                legendLabels.push(this.t(currentParent.component.legend, { _userInput: true }));
             }
             currentParent = currentParent.parent;
         }
-        return legendIds.reverse().join(' ');
+        legendIds.reverse();
+        legendLabels.reverse();
+        return { legendIds, legendLabels };
+    }
+    getFieldsetLegendIds() {
+        return this.getFieldsetLegendData().legendIds.join(' ');
+    }
+    getViewAccessibleLabel() {
+        const { legendLabels } = this.getFieldsetLegendData();
+        if (legendLabels.length === 0) {
+            return '';
+        }
+        return legendLabels.join(', ');
+    }
+    getFormattedViewAccessibleLabel() {
+        const label = this.getViewAccessibleLabel();
+        return label ? this.getFormattedAttribute(label) : '';
+    }
+    applyViewAccessibleAriaLabel(attributes = {}) {
+        if ((this.options.readOnly || this.options.pdf) && !attributes['aria-label']) {
+            const viewAccessibleLabel = this.getFormattedViewAccessibleLabel();
+            if (viewAccessibleLabel) {
+                attributes['aria-label'] = viewAccessibleLabel;
+            }
+        }
     }
     init() {
         this.disabled = this.shouldDisabled;
@@ -2244,12 +2270,17 @@ export default class Component extends Element {
                     break;
                 }
                 case 'mergeComponentSchema': {
+                    const safeData = FormioUtils.escapeInterpolationDataStrings(data);
+                    const safeRow = FormioUtils.escapeInterpolationDataStrings(row);
+                    const safeResult = typeof result === 'string'
+                        ? _.escape(result)
+                        : FormioUtils.escapeInterpolationDataStrings(result);
                     const schema = this.evaluate(action.schemaDefinition, {
                         value: _.clone(this.getValue()),
-                        data,
-                        row,
+                        data: safeData,
+                        row: safeRow,
                         component: newComponent,
-                        result,
+                        result: safeResult,
                     }, 'schema');
                     _.assign(newComponent, schema);
                     if (!_.isEqual(this.component, newComponent)) {
@@ -3767,6 +3798,7 @@ export default class Component extends Element {
         if (this.disabled) {
             attributes.disabled = 'disabled';
         }
+        this.applyViewAccessibleAriaLabel(attributes);
         _.defaults(attributes, this.component.attributes);
         return {
             type: 'input',

package/lib/mjs/components/_classes/input/Input.js

@@ -41,6 +41,7 @@ export default class Input extends Multivalue {
         if (this.component.autocomplete) {
             attr.autocomplete = this.component.autocomplete;
         }
+        this.applyViewAccessibleAriaLabel(attr);
         _.defaults(attr, this.component.attributes);
         return {
             id: this.key,

package/lib/mjs/components/address/Address.d.ts

@@ -73,6 +73,8 @@ export default class AddressComponent extends ContainerComponent {
     onSelectAddress(address: any, element: any, index: any): void;
     addRow(): void;
     attach(element: any): Promise<void>;
+    googlePlacesCleanups: any[] | undefined;
+    autocompleterWidget: import("autocompleter").AutocompleteResult | undefined;
     addChildComponent(component: any): void;
     clearAddress(element: any, index: any): void;
     getDisplayValue(value?: any): any;

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

@@ -411,19 +411,21 @@ export default class AddressComponent extends ContainerComponent {
             const target = shadowRoot.querySelector('.formio-form-wrapper');
             target.appendChild(container);
         }
-        else {
-            container = document.createElement('div');
-            document.body.appendChild(container);
-        }
         this.searchInput.forEach((element, index) => {
             if (!this.builderMode && element && this.provider) {
                 if (this.component.provider === 'google') {
-                    this.provider.attachAutocomplete(element, index, this.onSelectAddress.bind(this));
+                    this.googlePlacesCleanups = [];
+                    this.provider.attachAutocomplete(element, index, this.onSelectAddress.bind(this))
+                        .then((cleanup) => {
+                        if (typeof cleanup === 'function') {
+                            this.googlePlacesCleanups.push(cleanup);
+                        }
+                    });
                 }
                 else {
-                    autocompleter({
+                    this.autocompleterWidget = autocompleter({
                         input: element,
-                        container,
+                        ...(container ? { container } : {}),
                         debounceWaitMs: 300,
                         fetch: (text, update) => {
                             const query = text;
@@ -510,6 +512,16 @@ export default class AddressComponent extends ContainerComponent {
         }
         return result;
     }
+    detach() {
+        if (this.autocompleterWidget && typeof this.autocompleterWidget.destroy === 'function') {
+            this.autocompleterWidget.destroy();
+        }
+        ;
+        (this.googlePlacesCleanups || []).forEach((cleanup) => {
+            cleanup();
+        });
+        super.detach();
+    }
     addChildComponent(component) {
         component.customConditional = ChildConditional;
     }

package/lib/mjs/components/editgrid/EditGrid.js

@@ -521,6 +521,18 @@ export default class EditGridComponent extends NestedArrayComponent {
         else {
             const flattenedComponents = this.flattenComponents(rowIndex);
             const rowTemplate = this.rowTemplate;
+            _.each(flattenedComponents, (instance) => {
+                const needsItemLoad = instance &&
+                    instance.itemsFromUrl &&
+                    !instance.editGridItemsRequested &&
+                    !instance.isEmpty(instance.dataValue) &&
+                    _.isEmpty(instance.selectData);
+                if (needsItemLoad) {
+                    instance.editGridItemsRequested = true;
+                    instance.triggerUpdate(null, true);
+                    instance.itemsLoaded.then(() => this.redraw());
+                }
+            });
             return this.renderString(rowTemplate, {
                 row: dataValue[rowIndex] || {},
                 data: this.data,
@@ -964,7 +976,7 @@ export default class EditGridComponent extends NestedArrayComponent {
                 if (this.inlineEditMode) {
                     return;
                 }
-                const editRow = this.editRows[rowIndex];
+                const editRow = this.editRows[this.type === 'datatable' ? 0 : rowIndex];
                 if (editRow) {
                     this.processRow('checkData', null, {
                         ...flags,

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

@@ -283,7 +283,16 @@ export default class FormComponent extends Component {
                     }, this.text(this.formObj.title)));
                     return;
                 }
-                this.setContent(element, this.render());
+                // element is already this component's wrapper — inject the sub-form directly
+                // instead of re-rendering the component into itself (which duplicates the id).
+                let content;
+                if (this.component.modalEdit) {
+                    content = this.render();
+                }
+                else {
+                    content = this.subForm ? this.subForm.render() : this.renderTemplate('loading');
+                }
+                this.setContent(element, content);
                 const postAttach = () => {
                     if (!this.builderMode && this.component.modalEdit) {
                         const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;