Merge pull request #17320 from IgniteUI/ikitanov/fix-#17317-21.2.x

fix(grid): preserve refs and return new array to reflect changes

Author: kacheshmarova

projects/igniteui-angular/grids/core/src/api.service.ts

@@ -320,8 +320,8 @@ export class GridBaseAPIService<T extends GridType> implements GridServiceType {
             const transaction: Transaction = { id: rowId, type: TransactionType.ADD, newValue: rowData };
             grid.transactions.add(transaction);
         } else {
-            grid.data.push(rowData);
-            grid.data = cloneArray(grid.data);
+            (grid.data ?? (grid.data = [])).push(rowData);
+            grid.summaryService.clearSummaryCache();
         }
         grid.validation.markAsTouched(rowId);
         grid.validation.update(rowId, rowData);
@@ -336,8 +336,8 @@ export class GridBaseAPIService<T extends GridType> implements GridServiceType {
                 const transaction: Transaction = { id: rowID, type: TransactionType.DELETE, newValue: null };
                 grid.transactions.add(transaction, grid.data[index]);
             } else {
-                grid.data.splice(index, 1);
-                grid.data = cloneArray(grid.data);
+                (grid.data ?? (grid.data = [])).splice(index, 1);
+                grid.summaryService.clearSummaryCache();
             }
         } else {
             const state: State = grid.transactions.getState(rowID);

projects/igniteui-angular/grids/core/src/common/pipes.ts

@@ -248,7 +248,10 @@ export class IgxGridTransactionPipe implements PipeTransform {
                 this.grid.dataCloneStrategy);
             return result;
         }
-        return collection;
+        // Return a shallow copy so downstream pipes and igxGridForOf always
+        // receive a new array reference when pipeTrigger changes, regardless
+        // of whether the source array was mutated in place.
+        return cloneArray(collection);
     }
 }
 

projects/igniteui-angular/grids/grid/src/grid.crud.spec.ts

@@ -43,6 +43,41 @@ describe('IgxGrid - CRUD operations #grid', () => {
         expect(grid.rowList.length).toEqual(expectedLength);
     });
 
+    it('should keep the external data array reference in sync after repeated addRow() calls', () => {
+        const originalRef = fix.componentInstance.data;
+
+        for (let i = 2; i <= 6; i++) {
+            grid.addRow({ index: i, value: i * 10 });
+        }
+        fix.detectChanges();
+
+        expect(grid.data).toBe(originalRef);
+        expect(data.length).toEqual(6);
+        expect(data.find(r => r.index === 6)).toBeDefined();
+        expect(data).toBe(grid.data);
+    });
+
+    it('should keep the external data array reference in sync after repeated deleteRow() calls', () => {
+        const originalRef = fix.componentInstance.data;
+
+        for (let i = 2; i <= 5; i++) {
+            grid.addRow({ index: i, value: i * 10 });
+        }
+        fix.detectChanges();
+
+        expect(data.length).toEqual(5);
+
+        grid.deleteRow(1);
+        grid.deleteRow(3);
+        fix.detectChanges();
+
+        expect(grid.data).toBe(originalRef);
+        expect(data.length).toEqual(3);
+        expect(data.find(r => r.index === 1)).toBeUndefined();
+        expect(data.find(r => r.index === 3)).toBeUndefined();
+        expect(data).toBe(grid.data);
+    });
+
     // No longer supported - array mutations are not detected automatically, need ref change.
     xit('should support adding rows by manipulating the `data` @Input of the grid', () => {
         // Add to the data array without changing the reference