Merge branch '20.1.x' into pmoleri/fix-template-outlet-leak

Author: ChronosSF

projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { first } from 'rxjs/operators';
+import { first, throttleTime } from 'rxjs/operators';
 import { IgxForOfDirective } from '../directives/for-of/for_of.directive';
 import { GridType } from './common/grid.interface';
 import {
@@ -17,6 +17,7 @@ import { IActiveNodeChangeEventArgs } from './common/events';
 import { IgxGridGroupByRowComponent } from './grid/groupby-row.component';
 import { IMultiRowLayoutNode } from './common/types';
 import { SortingDirection } from '../data-operations/sorting-strategy';
+import { animationFrameScheduler, Subject } from 'rxjs';
 export interface ColumnGroupsCache {
     level: number;
     visibleIndex: number;
@@ -37,6 +38,7 @@ export class IgxGridNavigationService {
     public _activeNode: IActiveNode = {} as IActiveNode;
     public lastActiveNode: IActiveNode = {} as IActiveNode;
     protected pendingNavigation = false;
+    protected keydownNotify = new Subject<KeyboardEvent>();
 
     public get activeNode() {
         return this._activeNode;
@@ -46,7 +48,15 @@ export class IgxGridNavigationService {
         this._activeNode = value;
     }
 
-    constructor(protected platform: PlatformUtil) { }
+    constructor(protected platform: PlatformUtil) {
+        this.keydownNotify.pipe(
+            throttleTime(30, animationFrameScheduler),
+        )
+        .subscribe((event: KeyboardEvent) => {
+            this.dispatchEvent(event);
+        });
+
+     }
 
     public handleNavigation(event: KeyboardEvent) {
         const key = event.key.toLowerCase();
@@ -60,7 +70,7 @@ export class IgxGridNavigationService {
             event.preventDefault();
         }
         if (event.repeat) {
-            setTimeout(() => this.dispatchEvent(event), 1);
+            this.keydownNotify.next(event);
         } else {
             this.dispatchEvent(event);
         }
@@ -96,10 +106,8 @@ export class IgxGridNavigationService {
             event.preventDefault();
             this.navigateInBody(position.rowIndex, position.colIndex, (obj) => {
                 obj.target.activate(event);
-                this.grid.cdr.detectChanges();
             });
         }
-        this.grid.cdr.detectChanges();
     }
 
     public summaryNav(event: KeyboardEvent) {
@@ -145,7 +153,6 @@ export class IgxGridNavigationService {
                 this.grid.clearCellSelection();
                 this.grid.navigateTo(this.activeNode.row, this.activeNode.column, (obj) => {
                     obj.target?.activate(event);
-                    this.grid.cdr.detectChanges();
                 });
             } else {
                 if (hasLastActiveNode && !this.grid.selectionService.selected(this.lastActiveNode)) {
@@ -598,7 +605,6 @@ export class IgxGridNavigationService {
 
         this.navigateInBody(next.rowIndex, next.visibleColumnIndex, (obj) => {
             obj.target.activate(event);
-            this.grid.cdr.detectChanges();
         });
     }
 

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

@@ -617,6 +617,8 @@ describe('IgxGrid - Row Editing #grid', () => {
             // let cellDebug;
             UIInteractions.simulateDoubleClickAndSelectEvent(cellElem);
             fix.detectChanges();
+            await wait(DEBOUNCETIME);
+            fix.detectChanges();
 
             UIInteractions.triggerEventHandlerKeyDown('tab', gridContent, false, true);
             await wait(DEBOUNCETIME);
@@ -977,11 +979,11 @@ describe('IgxGrid - Row Editing #grid', () => {
             fix.detectChanges();
 
             const keyDonwSpy = spyOn(grid.gridKeydown, 'emit');
-            const detectChangesSpy = spyOn(grid.cdr, 'detectChanges').and.callThrough();
 
             UIInteractions.simulateDoubleClickAndSelectEvent(targetCell);
             fix.detectChanges();
 
+            const detectChangesSpy = spyOn(grid.cdr, 'detectChanges').and.callThrough();
             const cellElem = fix.debugElement.query(By.css(CELL_CLASS));
             const input = cellElem.query(By.css('input'));
 

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts

@@ -198,6 +198,73 @@ describe('IgxTreeGrid - Integration #tGrid', () => {
             treeGrid = fix.componentInstance.treeGrid;
         });
 
+        it('should preserve the order of records on inner levels', () => {
+            fix = TestBed.createComponent(IgxTreeGridPrimaryForeignKeyComponent);
+            fix.componentInstance.sortByName = true;
+            fix.detectChanges();
+            treeGrid = fix.componentInstance.treeGrid;
+
+            const expectedFlatData = [
+                {
+                    "ID": 1,
+                    "ParentID": -1,
+                    "Name": "Casey Houston",
+                    "JobTitle": "Vice President",
+                    "Age": 32
+                },
+                {
+                    "ID": 2,
+                    "ParentID": 1,
+                    "Name": "Gilberto Todd",
+                    "JobTitle": "Director",
+                    "Age": 41
+                },
+                {
+                    "ID": 7,
+                    "ParentID": 2,
+                    "Name": "Debra Morton",
+                    "JobTitle": "Associate Software Developer",
+                    "Age": 35
+                },
+                {
+                    "ID": 3,
+                    "ParentID": 2,
+                    "Name": "Tanya Bennett",
+                    "JobTitle": "Director",
+                    "Age": 29
+                },
+                {
+                    "ID": 4,
+                    "ParentID": 1,
+                    "Name": "Jack Simon",
+                    "JobTitle": "Software Developer",
+                    "Age": 33
+                },
+                {
+                    "ID": 10,
+                    "ParentID": -1,
+                    "Name": "Eduardo Ramirez",
+                    "JobTitle": "Manager",
+                    "Age": 53
+                },
+                {
+                    "ID": 9,
+                    "ParentID": 10,
+                    "Name": "Leslie Hansen",
+                    "JobTitle": "Associate Software Developer",
+                    "Age": 44
+                },
+                {
+                    "ID": 6,
+                    "ParentID": -1,
+                    "Name": "Erma Walsh",
+                    "JobTitle": "CEO",
+                    "Age": 52
+                },
+            ]
+            expect(treeGrid.flatData).toEqual(expectedFlatData);
+        });
+
         it('should transform a non-tree column into a tree column when pinning it', () => {
             TreeGridFunctions.verifyTreeColumn(fix, 'ID', 5);
 

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts

@@ -53,30 +53,44 @@ export class IgxTreeGridHierarchizingPipe implements PipeTransform {
         return primaryKey ? rowData[primaryKey] : rowData;
     }
 
-    private hierarchizeFlatData(collection: any[], primaryKey: string, foreignKey: string,
-        map: Map<any, ITreeGridRecord>, flatData: any[]):
-        ITreeGridRecord[] {
-        const result: ITreeGridRecord[] = [];
-        const missingParentRecords: ITreeGridRecord[] = [];
+    /**
+     * Converts a flat array of data into a hierarchical (tree) structure,
+     * preserving the original order of the records among siblings.
+     *
+     * It uses a two-pass approach:
+     * 1. Creates all ITreeGridRecord objects and populates the Map for quick lookup.
+     * 2. Links the records by iterating again, ensuring children are added to
+     * their parent's children array in the order they appeared in the
+     * original collection.
+     *
+     * @param collection The flat array of data to be hierarchized. This is the array whose order should be preserved.
+     * @param primaryKey The name of the property in the data objects that serves as the unique identifier (e.g., 'id').
+     * @param foreignKey The name of the property in the data objects that links to the parent's primary key (e.g., 'parentId').
+     * @param map A pre-existing Map object (key: primaryKey value, value: ITreeGridRecord) used to store and quickly look up all created records.
+     * @param flatData The original flat data array. Used for passing to the setIndentationLevels method (not directly used for hierarchy building).
+     * @returns An array of ITreeGridRecord objects representing the root nodes of the hierarchy, ordered as they appeared in the original collection.
+     */
+    private hierarchizeFlatData(
+        collection: any[],
+        primaryKey: string,
+        foreignKey: string,
+        map: Map<any, ITreeGridRecord>,
+        flatData: any[]
+    ): ITreeGridRecord[] {
         collection.forEach(row => {
             const record: ITreeGridRecord = {
                 key: this.getRowID(primaryKey, row),
                 data: row,
                 children: []
             };
-            const parent = map.get(row[foreignKey]);
-            if (parent) {
-                record.parent = parent;
-                parent.children.push(record);
-            } else {
-                missingParentRecords.push(record);
-            }
-
             map.set(row[primaryKey], record);
         });
 
-        missingParentRecords.forEach(record => {
-            const parent = map.get(record.data[foreignKey]);
+        const result: ITreeGridRecord[] = [];
+        collection.forEach(row => {
+            const record: ITreeGridRecord = map.get(row[primaryKey])!;
+            const parent = map.get(row[foreignKey]);
+
             if (parent) {
                 record.parent = parent;
                 parent.children.push(record);

projects/igniteui-angular/src/lib/test-utils/helper-utils.spec.ts

@@ -28,6 +28,8 @@ export let gridsubscriptions: Subscription [] = [];
 export const setupGridScrollDetection = (fixture: ComponentFixture<any>, grid: GridType) => {
     gridsubscriptions.push(grid.verticalScrollContainer.chunkLoad.subscribe(() => fixture.detectChanges()));
     gridsubscriptions.push(grid.parentVirtDir.chunkLoad.subscribe(() => fixture.detectChanges()));
+    gridsubscriptions.push(grid.activeNodeChange.subscribe(() => grid.cdr.detectChanges()));
+    gridsubscriptions.push(grid.selected.subscribe(() => grid.cdr.detectChanges()));
 };
 
 export const setupHierarchicalGridScrollDetection = (fixture: ComponentFixture<any>, hierarchicalGrid: IgxHierarchicalGridComponent) => {

projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts

@@ -159,10 +159,17 @@ export class IgxTreeGridWithNoScrollsComponent {
     `,
     imports: [IgxTreeGridComponent, IgxColumnComponent, IgxPaginatorComponent]
 })
-export class IgxTreeGridPrimaryForeignKeyComponent {
+export class IgxTreeGridPrimaryForeignKeyComponent implements OnInit {
     @ViewChild(IgxTreeGridComponent, { static: true }) public treeGrid: IgxTreeGridComponent;
-    public data = SampleTestData.employeePrimaryForeignKeyTreeData();
+    public data = [];
     public paging = false;
+    public sortByName = false;
+
+    public ngOnInit(): void {
+        this.data = !this.sortByName
+                        ? SampleTestData.employeePrimaryForeignKeyTreeData()
+                        : SampleTestData.employeePrimaryForeignKeyTreeData().sort((a, b) => a.Name.localeCompare(b.Name));
+    }
 }
 
 @Component({

src/app/grid-performance/grid-performance.sample.html

@@ -8,7 +8,7 @@ <h4 class="sample-title"> Fixed Size Rows</h4>
             </igx-grid-toolbar-actions>
         </igx-grid-toolbar>
         @for (c of columns; track c) {
-            <igx-column width='auto' [sortable]="true" [filterable]="true" [resizable]="true" [field]="c.field" [header]="c.field">
+            <igx-column width='auto' [editable]="true" [sortable]="true" [filterable]="true" [resizable]="true" [field]="c.field" [header]="c.field">
             </igx-column>
         }
     </igx-grid>