@formio/js 5.0.0 → 5.1.0-dev.5952.01438a4

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

@@ -2,7 +2,8 @@
 import _ from 'lodash';
 import Field from '../field/Field';
 import Components from '../../Components';
-import { getArrayFromComponentPath, getStringFromComponentPath, getRandomComponentId } from '../../../utils/utils';
+'';
+import { getComponentPaths, getRandomComponentId, componentMatches, getBestMatch, getStringFromComponentPath } from '../../../utils/utils';
 import { process as processAsync, processSync } from '@formio/core/process';
 /**
  * NestedComponent class.
@@ -80,17 +81,26 @@ export default class NestedComponent extends Field {
         const visibilityChanged = this._visible !== value;
         this._visible = value;
         const isVisible = this.visible;
+        const isConditionallyHidden = this.checkConditionallyHidden();
         const forceShow = this.shouldForceShow();
         const forceHide = this.shouldForceHide();
-        this.components.forEach(component => {
+        this.components.forEach((component) => {
             // Set the parent visibility first since we may have nested components within nested components
             // and they need to be able to determine their visibility based on the parent visibility.
             component.parentVisible = isVisible;
-            const conditionallyVisible = component.conditionallyVisible();
-            if (forceShow || conditionallyVisible) {
+            component._parentConditionallyHidden = isConditionallyHidden;
+            let visible;
+            if (component.hasCondition()) {
+                component._conditionallyHidden = component.checkConditionallyHidden() || component._parentConditionallyHidden;
+                visible = !component.conditionallyHidden;
+            }
+            else {
+                visible = !component.component.hidden;
+            }
+            if (forceShow || visible) {
                 component.visible = true;
             }
-            else if (forceHide || !isVisible || !conditionallyVisible) {
+            else if (forceHide || !isVisible || !visible) {
                 component.visible = false;
             }
             // If hiding a nested component, clear all errors below.
@@ -99,7 +109,6 @@ export default class NestedComponent extends Field {
             }
         });
         if (visibilityChanged) {
-            this.clearOnHide();
             this.redraw();
         }
     }
@@ -198,6 +207,10 @@ export default class NestedComponent extends Field {
      */
     set rowIndex(value) {
         this._rowIndex = value;
+        this.paths = getComponentPaths(this.component, this.parent?.component, {
+            ...(this.parent?.paths || {}),
+            ...{ dataIndex: value }
+        });
         this.eachComponent((component) => {
             component.rowIndex = value;
         });
@@ -293,56 +306,36 @@ export default class NestedComponent extends Field {
         });
     }
     /**
-     * Returns a component provided a key. This performs a deep search within the
-     * component tree.
+     * Returns a component provided a key. This performs a deep search within the component tree.
      * @param {string} path - The path to the component.
-     * @param {Function} [fn] - Called with the component once found.
-     * @param {string} [originalPath] - The original path to the component.
      * @returns {any} - The component that is located.
      */
-    getComponent(path, fn, originalPath) {
-        originalPath = originalPath || getStringFromComponentPath(path);
-        if (this.componentsMap.hasOwnProperty(originalPath)) {
-            if (fn) {
-                return fn(this.componentsMap[originalPath]);
-            }
-            else {
-                return this.componentsMap[originalPath];
-            }
-        }
-        path = getArrayFromComponentPath(path);
-        const pathStr = originalPath;
-        const newPath = _.clone(path);
-        let key = newPath.shift();
-        const remainingPath = newPath;
-        let comp = null;
-        let possibleComp = null;
-        if (_.isNumber(key)) {
-            key = remainingPath.shift();
-        }
-        if (!_.isString(key)) {
-            return comp;
-        }
-        this.everyComponent((component, components) => {
-            const matchPath = component.hasInput && component.path ? pathStr.includes(component.path) : true;
-            if (component.component.key === key) {
-                possibleComp = component;
-                if (matchPath) {
-                    comp = component;
-                    if (remainingPath.length > 0 && 'getComponent' in component) {
-                        comp = component.getComponent(remainingPath, fn, originalPath);
-                    }
-                    else if (fn) {
-                        fn(component, components);
-                    }
-                    return false;
-                }
-            }
+    getComponent(path) {
+        path = getStringFromComponentPath(path);
+        const matches = {
+            path: undefined,
+            fullPath: undefined,
+            localPath: undefined,
+            fullLocalPath: undefined,
+            dataPath: undefined,
+            localDataPath: undefined,
+            key: undefined,
+        };
+        this.everyComponent((component) => {
+            // All searches are relative to this component so replace this path from the child paths.
+            componentMatches(component.component, {
+                path: component.paths?.path?.replace(new RegExp(`^${this.paths?.path}\\.?`), ''),
+                fullPath: component.paths?.fullPath?.replace(new RegExp(`^${this.paths?.fullPath}\\.?`), ''),
+                localPath: component.paths?.localPath?.replace(new RegExp(`^${this.paths?.localPath}\\.?`), ''),
+                fullLocalPath: component.paths?.fullLocalPath?.replace(new RegExp(`^${this.paths?.fullLocalPath}\\.?`), ''),
+                dataPath: component.paths?.dataPath?.replace(new RegExp(`^${this.paths?.dataPath}\\.?`), ''),
+                localDataPath: component.paths?.localDataPath?.replace(new RegExp(`^${this.paths?.localDataPath}\\.?`), ''),
+            }, path, this.rowIndex, matches, (type, match) => {
+                match.instance = component;
+                return match;
+            });
         });
-        if (!comp) {
-            comp = possibleComp;
-        }
-        return comp;
+        return getBestMatch(matches)?.instance;
     }
     /**
      * Return a component provided the Id of the component.
@@ -380,6 +373,7 @@ export default class NestedComponent extends Field {
         data = data || this.data;
         options.parent = this;
         options.parentVisible = this.visible;
+        options.parentConditionallyHidden = this.conditionallyHidden;
         options.root = options?.root || this.root || this;
         options.localRoot = this.localRoot;
         options.skipInit = true;
@@ -638,7 +632,7 @@ export default class NestedComponent extends Field {
     clearOnHide(show) {
         super.clearOnHide(show);
         if (this.component.clearOnHide) {
-            if (this.allowData && !this.hasValue() && !(this.options.server && !this.visible)) {
+            if (this.allowData && !this.hasValue() && !this.conditionallyHidden) {
                 this.dataValue = this.defaultValue;
             }
             if (this.hasValue()) {
@@ -667,7 +661,7 @@ export default class NestedComponent extends Field {
     }
     calculateValue(data, flags, row) {
         // Do not iterate into children and calculateValues if this nested component is conditionally hidden.
-        if (!this.conditionallyVisible()) {
+        if (this.conditionallyHidden) {
             return false;
         }
         return this.getComponents().reduce((changed, comp) => comp.calculateValue(data, flags, row) || changed, super.calculateValue(data, flags, row));
@@ -678,19 +672,16 @@ export default class NestedComponent extends Field {
     isValid(data, dirty) {
         return this.getComponents().reduce((valid, comp) => comp.isValid(data, dirty) && valid, super.isValid(data, dirty));
     }
-    validationProcessor({ scope, data, row, instance, component }, flags) {
+    validationProcessor({ scope, data, row, instance, paths }, flags) {
         const { dirty } = flags;
         if (this.root.hasExtraPages && this.page !== this.root.page) {
-            instance = this.childComponentsMap?.hasOwnProperty(component.path)
-                ? this.childComponentsMap[component.path]
-                : this.getComponent(component.path);
+            instance = this.componentsMap?.hasOwnProperty(paths.dataPath)
+                ? this.componentsMap[paths.dataPath]
+                : this.getComponent(paths.dataPath);
         }
         if (!instance) {
             return;
         }
-        if (!instance.component.path) {
-            instance.component.path = component.path;
-        }
         instance.checkComponentValidity(data, dirty, row, flags, scope.errors);
         if (instance.processOwnValidation) {
             scope.noRecurse = true;
@@ -722,7 +713,10 @@ export default class NestedComponent extends Field {
             components,
             instances: this.componentsMap,
             data: data,
+            local: !!flags.local,
             scope: { errors: [] },
+            parent: this.component,
+            parentPaths: this.paths,
             processors: [
                 {
                     process: validationProcessorProcess,

package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.d.ts

@@ -2,6 +2,8 @@ export default class NestedArrayComponent extends NestedDataComponent {
     static savedValueTypes(): string[];
     componentContext(component: any): any;
     get iteratableRows(): void;
+    set rowIndex(value: number | undefined);
+    get rowIndex(): number | undefined;
     prevHasAddButton: any;
     checkAddButtonChanged(): void;
     checkData(data: any, flags: any, row: any): any;
@@ -10,8 +12,9 @@ export default class NestedArrayComponent extends NestedDataComponent {
     checkRow(...args: any[]): any;
     processRow(method: any, data: any, opts: any, row: any, components: any, silentCheck: any): any;
     hasAddButton(): any;
-    getComponent(path: any, fn: any, originalPath: any): any;
     everyComponent(fn: any, rowIndex: any, options?: {}): void;
+    _getEmailTableHeader(options: any): string;
+    _getEmailTableBody(options: any): string;
     getComponents(rowIndex: any): any;
     removeSubmissionMetadataRow(index: any): void;
 }

package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.js

@@ -1,6 +1,8 @@
 'use strict';
 import _ from 'lodash';
-import { componentValueTypes, getStringFromComponentPath } from '../../../utils/utils';
+import { Utils } from '@formio/core/utils';
+const { getComponentPaths } = Utils;
+import { componentValueTypes, isLayoutComponent } from '../../../utils/utils';
 import Component from '../component/Component';
 import NestedDataComponent from '../nesteddata/NestedDataComponent';
 export default class NestedArrayComponent extends NestedDataComponent {
@@ -19,9 +21,13 @@ export default class NestedArrayComponent extends NestedDataComponent {
         throw new Error('Getter #iteratableRows() is not implemented');
     }
     get rowIndex() {
-        return super.rowIndex;
+        return this._rowIndex;
     }
     set rowIndex(value) {
+        this.paths = getComponentPaths(this.component, this.parent?.component, {
+            ...(this.parent?.paths || {}),
+            ...{ dataIndex: value }
+        });
         this._rowIndex = value;
     }
     init() {
@@ -84,47 +90,6 @@ export default class NestedArrayComponent extends NestedDataComponent {
                 value: this.dataValue,
             }, 'show'));
     }
-    getComponent(path, fn, originalPath) {
-        originalPath = originalPath || getStringFromComponentPath(path);
-        if (this.componentsMap.hasOwnProperty(originalPath)) {
-            if (fn) {
-                return fn(this.componentsMap[originalPath]);
-            }
-            else {
-                return this.componentsMap[originalPath];
-            }
-        }
-        path = Array.isArray(path) ? path : [path];
-        let key = path.shift();
-        const remainingPath = path;
-        let result = [];
-        let possibleComp = null;
-        let comp = null;
-        let rowIndex = null;
-        if (_.isNumber(key)) {
-            rowIndex = key;
-            key = remainingPath.shift();
-        }
-        if (!_.isString(key)) {
-            return result;
-        }
-        this.everyComponent((component, components) => {
-            if (component.component.key === key) {
-                possibleComp = component;
-                if (remainingPath.length > 0 && 'getComponent' in component) {
-                    comp = component.getComponent(remainingPath, fn, originalPath);
-                }
-                else if (fn) {
-                    fn(component, components);
-                }
-                result = rowIndex !== null ? comp : result.concat(comp || possibleComp);
-            }
-        }, rowIndex);
-        if ((!result || result.length === 0) && possibleComp) {
-            result = rowIndex !== null ? possibleComp : [possibleComp];
-        }
-        return result;
-    }
     everyComponent(fn, rowIndex, options = {}) {
         if (_.isObject(rowIndex)) {
             options = rowIndex;
@@ -145,38 +110,60 @@ export default class NestedArrayComponent extends NestedDataComponent {
             }
         });
     }
+    _getEmailTableHeader(options) {
+        let row = '';
+        const getHeaderCell = (component) => {
+            if (!component.isInputComponent || !component.visible || component.skipInEmail) {
+                return '';
+            }
+            const label = component.label || component.key;
+            return `<th style="padding: 5px 10px;">${label}</th>`;
+        };
+        const components = this.getComponents(0);
+        for (const component of components) {
+            if (component.isInputComponent) {
+                row += getHeaderCell(component);
+            }
+            else if (isLayoutComponent(component) && typeof component.everyComponent === 'function') {
+                component.everyComponent((comp) => {
+                    row += getHeaderCell(comp);
+                }, options);
+            }
+        }
+        return `<thead><tr>${row}</tr></thead>`;
+    }
+    _getEmailTableBody(options) {
+        const getBodyCell = (component) => {
+            if (!component.isInputComponent || !component.visible || component.skipInEmail) {
+                return '';
+            }
+            return `<td style="padding: 5px 10px;">${component.getView(component.dataValue, options)}</td>`;
+        };
+        const rows = [];
+        for (const { components } of this.iteratableRows) {
+            let row = '';
+            for (const component of components) {
+                if (component.isInputComponent) {
+                    row += getBodyCell(component);
+                }
+                else if (isLayoutComponent(component) && typeof component.everyComponent === 'function') {
+                    component.everyComponent((comp) => {
+                        row += getBodyCell(comp);
+                    }, options);
+                }
+            }
+            rows.push(`<tr>${row}</tr>`);
+        }
+        return `<tbody>${rows.join('')}</tbody>`;
+    }
     getValueAsString(value, options) {
         if (options?.email) {
-            let result = (`
+            return `
         <table border="1" style="width:100%">
-          <thead>
-            <tr>
-      `);
-            this.component.components?.forEach((component) => {
-                const label = component.label || component.key;
-                result += `<th style="padding: 5px 10px;">${label}</th>`;
-            });
-            result += (`
-          </tr>
-        </thead>
-        <tbody>
-      `);
-            this.iteratableRows.forEach(({ components }) => {
-                result += '<tr>';
-                _.each(components, (component) => {
-                    result += '<td style="padding:5px 10px;">';
-                    if (component.isInputComponent && component.visible && !component.skipInEmail) {
-                        result += component.getView(component.dataValue, options);
-                    }
-                    result += '</td>';
-                });
-                result += '</tr>';
-            });
-            result += (`
-          </tbody>
+          ${this._getEmailTableHeader(options)}
+          ${this._getEmailTableBody(options)}
         </table>
-      `);
-            return result;
+      `;
         }
         if (!value || !value.length) {
             return '';

package/lib/mjs/components/checkbox/Checkbox.d.ts

@@ -43,7 +43,7 @@ export default class CheckBoxComponent extends Field {
     attach(element: any): Promise<void>;
     input: any;
     detach(element: any): void;
-    get emptyValue(): false | null;
+    get emptyValue(): false | "";
     getValueAt(index: any): any;
     get checked(): boolean;
     setCheckedState(value: any): any;

package/lib/mjs/components/checkbox/Checkbox.js

@@ -116,7 +116,7 @@ export default class CheckBoxComponent extends Field {
         super.detach();
     }
     get emptyValue() {
-        return this.component.inputType === 'radio' ? null : false;
+        return this.component.inputType === 'radio' ? '' : false;
     }
     isEmpty(value = this.dataValue) {
         return super.isEmpty(value) || value === false;

package/lib/mjs/components/datagrid/DataGrid.d.ts

@@ -12,6 +12,7 @@ export default class DataGridComponent extends NestedArrayComponent {
     tabIndex: number;
     rows: any[] | undefined;
     columns: any[] | undefined;
+    dragulaReady: Promise<any> | undefined;
     visibleColumns: {} | undefined;
     set dataValue(value: any[]);
     get dataValue(): any[];
@@ -70,6 +71,7 @@ export default class DataGridComponent extends NestedArrayComponent {
      */
     reorderValues(valuesArr: any, oldPosition: number, newPosition: number, movedBelow: boolean | any): void;
     onReorder(element: any, _target: any, _source: any, sibling: any): void;
+    onCloned(el: any, original: any): void;
     focusOnNewRowElement(row: any): void;
     addRow(): void;
     updateComponentsRowIndex(components: any, rowIndex: any): void;
@@ -85,7 +87,6 @@ export default class DataGridComponent extends NestedArrayComponent {
         show: boolean;
     };
     checkComponentConditions(data: any, flags: any, row: any): boolean;
-    getComponent(path: any, fn: any): any;
     toggleGroup(element: any, index: any): void;
 }
 import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';

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

@@ -1,8 +1,6 @@
 import _ from 'lodash';
 import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';
 import { fastCloneDeep, getFocusableElements } from '../../utils/utils';
-import Components from '../Components';
-import dragula from 'dragula';
 export default class DataGridComponent extends NestedArrayComponent {
     static schema(...extend) {
         return NestedArrayComponent.schema({
@@ -39,6 +37,9 @@ export default class DataGridComponent extends NestedArrayComponent {
         if (this.initRows || !_.isEqual(this.dataValue, this.emptyValue)) {
             this.createRows(true);
         }
+        if (this.allowReorder) {
+            this.dragulaReady = this.getDragula();
+        }
         this.visibleColumns = {};
         this.prevHasAddButton = this.hasAddButton();
         this.checkColumns();
@@ -271,31 +272,25 @@ export default class DataGridComponent extends NestedArrayComponent {
             this.refs[`${this.datagridKey}-row`].forEach((row, index) => {
                 row.dragInfo = { index };
             });
-            this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {
-                moves: (_draggedElement, _oldParent, clickedElement) => {
-                    const clickedElementKey = clickedElement.getAttribute('data-key');
-                    const oldParentKey = _oldParent.getAttribute('data-key');
-                    //Check if the clicked button belongs to that container, if false, it belongs to the nested container
-                    if (oldParentKey === clickedElementKey) {
-                        return clickedElement.classList.contains('formio-drag-button');
-                    }
+            this.dragulaReady.then((dragula) => {
+                // The drop event may call redraw twice which calls attach twice and because this block of code is asynchronous
+                // BOTH redraws may be called before this block of code runs (which causes this block of code to run twice sequentially).
+                // This causes two dragula() calls on the same container which breaks dragula. To fix this the return value must
+                // be saved in this.dragula and have its container contents reset if it exists
+                if (this.dragula && this.dragula.containers) {
+                    this.dragula.containers = [];
                 }
-            }).on('drop', this.onReorder.bind(this));
-            this.dragula.on('cloned', (el, original) => {
-                if (el && el.children && original && original.children) {
-                    _.each(original.children, (child, index) => {
-                        const styles = getComputedStyle(child, null);
-                        if (styles.cssText !== '') {
-                            el.children[index].style.cssText = styles.cssText;
+                this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {
+                    moves: (_draggedElement, _oldParent, clickedElement) => {
+                        const clickedElementKey = clickedElement.getAttribute('data-key');
+                        const oldParentKey = _oldParent.getAttribute('data-key');
+                        //Check if the clicked button belongs to that container, if false, it belongs to the nested container
+                        if (oldParentKey === clickedElementKey) {
+                            return clickedElement.classList.contains('formio-drag-button');
                         }
-                        else {
-                            const cssText = Object.values(styles).reduce((css, propertyName) => {
-                                return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;
-                            }, '');
-                            el.children[index].style.cssText = cssText;
-                        }
-                    });
-                }
+                    }
+                }).on('drop', this.onReorder.bind(this))
+                    .on('cloned', this.onCloned.bind(this));
             });
         }
         this.refs[`${this.datagridKey}-addRow`].forEach((addButton) => {
@@ -355,10 +350,29 @@ export default class DataGridComponent extends NestedArrayComponent {
         this.reorderValues(dataValue, oldPosition, newPosition, movedBelow);
         //reorder select data
         this.reorderValues(_.get(this.root, `submission.metadata.selectData.${this.path}`, []), oldPosition, newPosition, movedBelow);
+        // When components are reordered we need to set the dataGrid and form pristine properties to false
+        this.root.pristine = false;
+        this.pristine = false;
         //need to re-build rows to re-calculate indexes and other indexed fields for component instance (like rows for ex.)
         this.setValue(dataValue, { isReordered: true });
         this.rebuild();
     }
+    onCloned(el, original) {
+        if (el && el.children && original && original.children) {
+            _.each(original.children, (child, index) => {
+                const styles = getComputedStyle(child, null);
+                if (styles.cssText !== '') {
+                    el.children[index].style.cssText = styles.cssText;
+                }
+                else {
+                    const cssText = Object.values(styles).reduce((css, propertyName) => {
+                        return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;
+                    }, '');
+                    el.children[index].style.cssText = cssText;
+                }
+            });
+        }
+    }
     focusOnNewRowElement(row) {
         Object.keys(row).find((key) => {
             const element = row[key].element;
@@ -407,7 +421,6 @@ export default class DataGridComponent extends NestedArrayComponent {
             }
             component.rowIndex = rowIndex;
             component.row = `${rowIndex}-${colIndex}`;
-            component.path = Components.getComponentPath(component);
         });
     }
     updateRowsComponents(rowIndex) {
@@ -417,7 +430,7 @@ export default class DataGridComponent extends NestedArrayComponent {
     }
     removeRow(index) {
         const makeEmpty = index === 0 && this.rows.length === 1;
-        const flags = { isReordered: !makeEmpty, resetValue: makeEmpty };
+        const flags = { isReordered: !makeEmpty, resetValue: makeEmpty, modified: true };
         this.splice(index, flags);
         this.emit('dataGridDeleteRow', { index });
         const [row] = this.rows.splice(index, 1);
@@ -473,6 +486,7 @@ export default class DataGridComponent extends NestedArrayComponent {
             const options = _.clone(this.options);
             options.name += `[${rowIndex}]`;
             options.row = `${rowIndex}-${colIndex}`;
+            options.rowIndex = rowIndex;
             let columnComponent;
             if (this.builderMode) {
                 col.id = col.id + rowIndex;
@@ -595,49 +609,6 @@ export default class DataGridComponent extends NestedArrayComponent {
     restoreComponentsContext() {
         this.rows.forEach((row, index) => _.forIn(row, (component) => component.data = this.dataValue[index]));
     }
-    getComponent(path, fn) {
-        path = Array.isArray(path) ? path : [path];
-        const [key, ...remainingPath] = path;
-        let result = [];
-        if (_.isNumber(key) && remainingPath.length) {
-            const compKey = remainingPath.pop();
-            result = this.rows[key][compKey];
-            // If the component is inside a Layout Component, try to find it among all the row's components
-            if (!result) {
-                Object.entries(this.rows[key]).forEach(([, comp]) => {
-                    if ('getComponent' in comp) {
-                        const possibleResult = comp.getComponent([compKey], fn);
-                        if (possibleResult) {
-                            result = possibleResult;
-                        }
-                    }
-                });
-            }
-            if (result && _.isFunction(fn)) {
-                fn(result, this.getComponents());
-            }
-            if (remainingPath.length && 'getComponent' in result) {
-                return result.getComponent(remainingPath, fn);
-            }
-            return result;
-        }
-        if (!_.isString(key)) {
-            return result;
-        }
-        this.everyComponent((component, components) => {
-            if (component.component.key === key) {
-                let comp = component;
-                if (remainingPath.length > 0 && 'getComponent' in component) {
-                    comp = component.getComponent(remainingPath, fn);
-                }
-                else if (fn) {
-                    fn(component, components);
-                }
-                result = result.concat(comp);
-            }
-        });
-        return result.length > 0 ? result : null;
-    }
     toggleGroup(element, index) {
         element.classList.toggle('collapsed');
         _.each(this.refs.chunks[index], row => {

package/lib/mjs/components/datamap/DataMap.js

@@ -3,7 +3,6 @@ import DataGridComponent from '../datagrid/DataGrid';
 import _ from 'lodash';
 import EventEmitter from 'eventemitter3';
 import { componentValueTypes, getComponentSavedTypes, uniqueKey } from '../../utils/utils';
-import Components from '../Components';
 export default class DataMapComponent extends DataGridComponent {
     static schema(...extend) {
         return Component.schema({
@@ -70,7 +69,7 @@ export default class DataMapComponent extends DataGridComponent {
     }
     get dataValue() {
         if (!this.key ||
-            (!this.visible && this.component.clearOnHide)) {
+            (this.conditionallyHidden && this.component.clearOnHide)) {
             return this.emptyValue;
         }
         if (!this.hasValue() && this.shouldAddDefaultValue) {
@@ -227,6 +226,7 @@ export default class DataMapComponent extends DataGridComponent {
         options.events = new EventEmitter();
         options.name += `[${rowIndex}]`;
         options.row = `${rowIndex}`;
+        options.rowIndex = rowIndex;
         const components = {};
         components['__key'] = this.createComponent(this.keySchema, options, { __key: this.builderMode ? this.defaultRowKey : key });
         components['__key'].on('componentChange', (event) => {
@@ -236,7 +236,6 @@ export default class DataMapComponent extends DataGridComponent {
             delete dataValue[key];
             const comp = components[this.valueKey];
             comp.component.key = newKey;
-            comp.path = Components.getComponentPath(comp);
             key = newKey;
         });
         const valueComponent = _.clone(this.component.valueComponent);

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

@@ -43,7 +43,7 @@ export default class EditGridComponent extends NestedArrayComponent {
     get defaultValue(): any[];
     hasRemoveButtons(): boolean;
     editRows: any;
-    checkRowVariableTypeComponents(editRow: any, rowIndex: any): void;
+    checkRowVariableTypeComponents(editRow: any, rowIndex: any): boolean;
     setVariableTypeComponents(): void;
     variableTypeComponentsIndexes: any[] | undefined;
     isOpen(editRow: any): boolean;