Merge pull request #8621 from IgniteUI/skrastev/fix-8587-10.2.x

fix(igxGrid): Fix adding row recreates row forOf directive due to template change.

Author: ChronosSF

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -3254,6 +3254,17 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         }
     }
 
+    /**
+     * @hidden @internal
+     */
+    public resetHorizontalForOfs() {
+        const elementFilter = (item: IgxRowDirective<any> | IgxSummaryRowComponent) => this.isDefined(item.nativeElement.parentElement);
+        this._horizontalForOfs = [
+            ...this._dataRowList.filter(elementFilter).map(item => item.virtDirRow),
+            ...this._summaryRowList.filter(elementFilter).map(item => item.virtDirRow)
+        ];
+    }
+
     /**
      * @hidden @internal
      */
@@ -3262,15 +3273,9 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         const extractForOfs = pipe(map((collection: any[]) => collection.filter(elementFilter).map(item => item.virtDirRow)));
         const rowListObserver = extractForOfs(this._dataRowList.changes);
         const summaryRowObserver = extractForOfs(this._summaryRowList.changes);
-        const resetHorizontalForOfs = () => {
-            this._horizontalForOfs = [
-                ...this._dataRowList.filter(elementFilter).map(item => item.virtDirRow),
-                ...this._summaryRowList.filter(elementFilter).map(item => item.virtDirRow)
-            ];
-        };
-        rowListObserver.pipe(takeUntil(this.destroy$)).subscribe(resetHorizontalForOfs);
-        summaryRowObserver.pipe(takeUntil(this.destroy$)).subscribe(resetHorizontalForOfs);
-        resetHorizontalForOfs();
+        rowListObserver.pipe(takeUntil(this.destroy$)).subscribe(() => { this.resetHorizontalForOfs(); });
+        summaryRowObserver.pipe(takeUntil(this.destroy$)).subscribe(() => { this.resetHorizontalForOfs(); });
+        this.resetHorizontalForOfs();
     }
 
     /**

projects/igniteui-angular/src/lib/grids/grid/grid-add-row.spec.ts

@@ -24,6 +24,8 @@ import { Subject } from 'rxjs';
 
 
 describe('IgxGrid - Row Adding #grid', () => {
+        const GRID_ROW = 'igx-grid-row';
+        const DISPLAY_CONTAINER = 'igx-display-container';
         const SUMMARY_ROW = 'igx-grid-summary-row';
         let fixture;
         let grid: IgxGridComponent;
@@ -547,6 +549,42 @@ describe('IgxGrid - Row Adding #grid', () => {
             expect(newRow.addRow).toBeFalse();
             expect(grid.data.length).toBe(dataLength + 1);
         });
+
+        it('Should correctly scroll all rows after closing the add row', async() => {
+            grid.width = '400px';
+            fixture.detectChanges();
+
+            const dataLength = grid.data.length;
+            const row = grid.rowList.first;
+            row.beginAddRow();
+            fixture.detectChanges();
+
+            endTransition();
+
+            let newRow = grid.getRowByIndex(1);
+            expect(newRow.addRow).toBeTrue();
+
+            const cancelButtonElement = GridFunctions.getRowEditingCancelButton(fixture);
+            cancelButtonElement.click();
+            fixture.detectChanges();
+            await wait(100);
+            fixture.detectChanges();
+
+            newRow = grid.getRowByIndex(1);
+            expect(newRow.addRow).toBeFalse();
+            expect(grid.data.length).toBe(dataLength);
+
+            (grid as any).scrollTo(0, grid.columnList.length - 1);
+            await wait(100);
+            fixture.detectChanges();
+
+            // All rows should be scrolled, from their forOf directive. If not then the `_horizontalForOfs` in the grid is outdated.
+            const gridRows = fixture.debugElement.queryAll(By.css(GRID_ROW));
+            gridRows.forEach(item => {
+                const displayContainer = item.query(By.css(DISPLAY_CONTAINER));
+                expect(displayContainer.nativeElement.style.left).not.toBe('0px');
+            });
+        });
     });
 
     describe('Row Adding - Paging tests', () => {

projects/igniteui-angular/src/lib/grids/row.directive.ts

@@ -11,7 +11,9 @@ import {
     ViewChildren,
     Directive,
     Output,
-    EventEmitter
+    EventEmitter,
+    AfterViewInit,
+    OnDestroy
 } from '@angular/core';
 import { IgxCheckboxComponent } from '../checkbox/checkbox.component';
 import { IgxGridForOfDirective } from '../directives/for-of/for_of.directive';
@@ -22,11 +24,13 @@ import { IgxGridBaseDirective } from './grid-base.directive';
 import { IgxGridSelectionService, IgxGridCRUDService, IgxRow } from './selection/selection.service';
 import { GridType } from './common/grid.interface';
 import merge from 'lodash.merge';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Directive({
     selector: '[igxRowBaseComponent]'
 })
-export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implements DoCheck {
+export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implements DoCheck, AfterViewInit, OnDestroy {
 
     protected _rowData: any;
     protected _addRow: boolean;
@@ -140,8 +144,12 @@ export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implemen
     /**
      * @hidden
      */
-    @ViewChild('igxDirRef', { read: IgxGridForOfDirective })
-    public virtDirRow: IgxGridForOfDirective<any>;
+    @ViewChildren('igxDirRef', { read: IgxGridForOfDirective })
+    public _virtDirRow: QueryList<IgxGridForOfDirective<any>>;
+
+    public get virtDirRow(): IgxGridForOfDirective<any> {
+        return this._virtDirRow ? this._virtDirRow.first : null;
+    }
 
     /**
      * @hidden
@@ -370,6 +378,7 @@ export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implemen
      */
     public defaultCssClass = 'igx-grid__tr';
 
+    protected destroy$ = new Subject<any>();
 
     constructor(
         public gridAPI: GridBaseAPIService<T>,
@@ -378,6 +387,16 @@ export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implemen
         public element: ElementRef<HTMLElement>,
         public cdr: ChangeDetectorRef) {}
 
+    public ngAfterViewInit() {
+        // If the template of the row changes, the forOf in it is recreated and is not detected by the grid and rows can't be scrolled.
+        this._virtDirRow.changes.pipe(takeUntil(this.destroy$)).subscribe(() => this.grid.resetHorizontalForOfs());
+    }
+
+    public ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+
     /**
      * @hidden
      * @internal