diff --git a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts index 97203e626fa..1e7b92f4d94 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts +++ b/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(); 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(); }); } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts index 9d5435d1bb2..affd275b0c4 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts +++ b/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')); diff --git a/projects/igniteui-angular/src/lib/test-utils/helper-utils.spec.ts b/projects/igniteui-angular/src/lib/test-utils/helper-utils.spec.ts index bebe4b0955c..cf93eb7c80f 100644 --- a/projects/igniteui-angular/src/lib/test-utils/helper-utils.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/helper-utils.spec.ts @@ -28,6 +28,8 @@ export let gridsubscriptions: Subscription [] = []; export const setupGridScrollDetection = (fixture: ComponentFixture, 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, hierarchicalGrid: IgxHierarchicalGridComponent) => { diff --git a/src/app/grid-performance/grid-performance.sample.html b/src/app/grid-performance/grid-performance.sample.html index 7e702eaa343..21792206a21 100644 --- a/src/app/grid-performance/grid-performance.sample.html +++ b/src/app/grid-performance/grid-performance.sample.html @@ -8,7 +8,7 @@

Fixed Size Rows

@for (c of columns; track c) { - + }