DataGrid - Canceled rows are hidden when multiple rows are added in batch mode (T1250405)

e2e/testcafe-devextreme/tests/dataGrid/editing/editingEvents.ts

@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/no-misused-promises */
-import { ClientFunction } from 'testcafe';
+import { ClientFunction, Selector } from 'testcafe';
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import { Overlay } from 'devextreme-testcafe-models/dataGrid/overlay';
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import { createWidget } from '../../../helpers/createWidget';
 import url from '../../../helpers/getPageUrl';
 
@@ -172,3 +174,52 @@ testCases.forEach(({ caseName, expected, onRowRemoving }) => {
     });
   });
 });
+
+// T1250405
+test('DataGrid - Canceled rows are hidden when multiple rows are added in batch mode', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const addBtn = dataGrid.getToolbar().getItem();
+  const saveBtn = dataGrid.getToolbar().getItem(1);
+  await t
+    .click(addBtn)
+    .pressKey('1')
+    .click(addBtn)
+    .pressKey('2')
+    .click(saveBtn);
+
+  const overlay1 = new Overlay(Selector('.dx-overlay-wrapper'), 0);
+  const overlay2 = new Overlay(Selector('.dx-overlay-wrapper'), 1);
+  const cancelBtn = overlay2.getToolbar(1).getItem(1);
+  const saveBtnPopup = overlay1.getToolbar(1).getItem(0);
+
+  await t
+    .click(cancelBtn)
+    .click(saveBtnPopup);
+  await t
+    .expect(await takeScreenshot('T1250405-canceled-rows-hidden.png', dataGrid.element))
+    .ok()
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await createWidget('dxDataGrid', {
+    dataSource: [
+      { ID: 1, Text: 'Item 1' },
+    ],
+    keyExpr: 'ID',
+    columns: ['Text'],
+    editing: {
+      mode: 'batch',
+      allowAdding: true,
+    },
+    onRowInserting(e: any) {
+      e.cancel = new Promise((resolve) => {
+        const dialog = (window as any).DevExpress.ui.dialog.confirm(
+          'Are you sure?',
+          'Confirm changes',
+        );
+        dialog.done((confirm) => resolve(!confirm));
+      });
+    },
+  });
+});

packages/devextreme/js/__internal/grids/grid_core/data_controller/m_data_controller.ts

@@ -80,6 +80,7 @@ interface Item {
   values?: unknown[];
   visible?: boolean;
   isExpanded?: boolean;
+  isNewRow: boolean;
   summaryCells?: unknown[];
   rowIndex?: number;
   cells?: unknown[];

packages/devextreme/js/__internal/grids/grid_core/editing/m_editing.ts

@@ -1699,6 +1699,10 @@ class EditingControllerImpl extends modules.ViewController {
         }
       } else if (this._processRemove(changes, editIndex, cancel)) {
         hasSavedData = !cancel;
+
+        if (!cancel && change?.type === DATA_EDIT_DATA_INSERT_TYPE) {
+          this._updateUnsavedRowsInsertKey(results[i].key, changes);
+        }
       }
     }
 
@@ -1709,6 +1713,25 @@ class EditingControllerImpl extends modules.ViewController {
     return hasSavedData;
   }
 
+  private _updateUnsavedRowsInsertKey(tempKey, changes: any[]) {
+    const topSavedRowKey = this._getTopSavedRowKey();
+    if (!topSavedRowKey) return;
+
+    changes.forEach((unsavedChange) => {
+      if (
+        unsavedChange.type === DATA_EDIT_DATA_INSERT_TYPE
+            && unsavedChange.insertBeforeKey === tempKey
+      ) {
+        unsavedChange.insertBeforeKey = topSavedRowKey;
+      }
+    });
+  }
+
+  private _getTopSavedRowKey() {
+    const savedRows = this._dataController.items().filter((item) => !item.isNewRow);
+    return savedRows.length ? savedRows[0].key : null;
+  }
+
   private _fireSaveEditDataEvents(changes) {
     each(changes, (_, { data, key, type }) => {
       const internalData = this._addInternalData({ key });

packages/testcafe-models/dataGrid/overlay.ts

@@ -1,10 +1,12 @@
 import { Selector } from 'testcafe';
+import Toolbar from '../toolbar';
 
 const CLASS = {
   overlayWrapper: 'dx-overlay-wrapper',
   overlayContent: 'dx-overlay-content',
   invalidMessage: 'dx-invalid-message',
   revertTooltip: 'dx-datagrid-revert-tooltip',
+  toolbar: 'dx-toolbar',
   checkbox: 'dx-checkbox',
 };
 
@@ -13,8 +15,10 @@ export class Overlay {
 
   content: Selector;
 
-  constructor(id?: Selector) {
-    this.element = id ?? Selector(`.${CLASS.overlayWrapper}`);
+  constructor(id?: Selector, index?: number) {
+    this.element = id 
+      ? (index ? id.nth(index) : id) 
+      : Selector(`.${CLASS.overlayWrapper}`).nth(index ? index : 0);
 
     this.content = this.element.find(`.${CLASS.overlayContent}`);
   }
@@ -30,4 +34,8 @@ export class Overlay {
   getPopupCheckbox(): Selector {
     return this.element.find(`.${CLASS.overlayContent} .${CLASS.checkbox}`);
   }
+
+  getToolbar(idx?: number): Toolbar {
+    return new Toolbar(this.element.find(`.${CLASS.toolbar}`).nth(idx ? idx : 0));
+  }
 }