diff --git a/projects/igniteui-angular/src/lib/grids/grid-mrl-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/grid-mrl-navigation.service.ts index 1f0cd65ee7a..68e1c666e26 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-mrl-navigation.service.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-mrl-navigation.service.ts @@ -355,7 +355,8 @@ export class IgxGridMRLNavigationService extends IgxGridNavigationService { private hasNextVerticalPosition(prev = false) { if ((prev && this.activeNode.row === 0 && (!this.isDataRow(this.activeNode.row) || this.activeNode.layout.rowStart === 1)) || - (!prev && this.activeNode.row >= this.grid.dataView.length - 1 && this.activeNode.column === this.lastColIndexPerMRLBlock())) { + (!prev && this.activeNode.row >= this.grid.dataView.length - 1 && + this.activeNode.layout.rowStart === this.lastRowStartPerBlock())) { return false; } return true; diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts index a4b64813680..0206e5b5303 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts @@ -12,6 +12,7 @@ import { GridFunctions, GRID_MRL_BLOCK } from '../../test-utils/grid-functions.s import { CellType } from '../common/grid.interface'; import { IgxColumnLayoutComponent } from '../columns/column-layout.component'; import { IGridCellEventArgs, IgxColumnComponent } from '../public_api'; +import { IgxGridMRLNavigationService } from '../grid-mrl-navigation.service'; const DEBOUNCE_TIME = 30; const CELL_CSS_CLASS = '.igx-grid__td'; @@ -297,6 +298,40 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => { GridFunctions.verifyGridContentActiveDescendant(GridFunctions.getGridContent(fix), cell.nativeElement.id); }); + it('should not return an out of bounds row index when navigating down from the last layout row', () => { + fix.componentInstance.data = SampleTestData.contactInfoDataFull().slice(0, 10); + fix.componentInstance.colGroups = [{ + group: 'group1', + columns: [ + { field: 'ID', rowStart: 1, colStart: 1 }, + { field: 'CompanyName', rowStart: 1, colStart: 2 }, + { field: 'ContactName', rowStart: 1, colStart: 3 }, + { field: 'ContactTitle', rowStart: 1, colStart: 4 }, + { field: 'Address', rowStart: 1, colStart: 5 }, + { field: 'City', rowStart: 2, colStart: 1 }, + { field: 'Region', rowStart: 2, colStart: 2 }, + { field: 'PostalCode', rowStart: 2, colStart: 3 }, + { field: 'Phone', rowStart: 2, colStart: 4 }, + { field: 'Fax', rowStart: 2, colStart: 5 } + ] + }]; + fix.detectChanges(); + + const grid = fix.componentInstance.grid; + const lastRowIndex = grid.dataView.length - 1; + const navService = grid.navigation as IgxGridMRLNavigationService; + const col = grid.getColumnByName('City'); + navService.setActiveNode({ + row: lastRowIndex, + column: col.visibleIndex, + layout: navService.layout(col.visibleIndex) + }); + + const nextPos = navService.getNextVerticalPosition(); + expect(nextPos.row).toBe(lastRowIndex); + expect(nextPos.column).toBe(navService.activeNode.column); + }); + it('should navigate up correctly', () => { fix.componentInstance.colGroups = [{ group: 'group1',