Merge pull request #8726 from IgniteUI/ddincheva/activeNode-m

Active node doesn't resets horizontal/vertical scroll positions when page lost focus and regain again

Author: zdrawku

CHANGELOG.md

@@ -15,6 +15,14 @@ All notable changes for each version of this project will be documented in this
 ### General
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - a new property `event` has been introduced to `IGridEditEventArgs` and `IGridEditDoneEventArgs`; the property represents the original DOM event that triggers any of Grid editing events like `rowEditEnter`, `cellEditEnter`, `cellEdit`, `cellEditDone`, `cellEditExit`, `rowEdit`, `rowEditDone`, `rowEditExit`
+    - **Behavioral Change** -
+    When there isn't a previous active node and the user enters the grid using tab or shift + tab key:
+    the first fully visible element is activated: /no scroll bar positioning is reset/changed;
+    If there is a previous active node in the grid - the previously active node is reactivated without resetting the scroll positions;
+    If we follow the default tab navigation and we are currently on a data cell with / rowIndex: -1, columnIndex: 6/ for example
+    when we tab down to the root summaries the summary cell with visible column index 6 should be activated and scroll into the view;
+    The same applies if you shift+tab to the headers header cell with visible index 6 is activated and scrolled into the view;
+    If you have an active node and go to another tab and then return back the active node and the current scroll position should not be changed;
 
 ## 11.0.0
 

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

@@ -3027,6 +3027,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
                     || (event.target === this.theadRow.nativeElement && this.navigation.activeNode.row === -1)
                     || (event.target === this.tfoot.nativeElement && this.navigation.activeNode.row === this.dataView.length)) &&
                 !(this.rowEditable && this.crudService.rowEditingBlocked && this.rowInEditMode)) {
+                this.navigation.lastActiveNode = this.navigation.activeNode;
                 this.navigation.activeNode = {} as IActiveNode;
                 this.notifyChanges();
             }

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

@@ -28,6 +28,7 @@ export interface IActiveNode {
 export class IgxGridNavigationService {
     public grid: IgxGridBaseDirective & GridType;
     public _activeNode: IActiveNode = {} as IActiveNode;
+    public lastActiveNode: IActiveNode = {} as IActiveNode;
     protected pendingNavigation = false;
 
     public get activeNode() {
@@ -40,6 +41,7 @@ export class IgxGridNavigationService {
 
     handleNavigation(event: KeyboardEvent) {
         const key = event.key.toLowerCase();
+        if (this.grid.crudService.cell && NAVIGATION_KEYS.has(key)) { return; }
         if (event.repeat && SUPPORTED_KEYS.has(key) || (key === 'tab' && this.grid.crudService.cell)) {
             event.preventDefault();
         }
@@ -66,8 +68,6 @@ export class IgxGridNavigationService {
         if ([' ', 'spacebar', 'space'].indexOf(key) === -1) {
             this.grid.selectionService.keyboardStateOnKeydown(this.activeNode, shift, shift && key === 'tab');
         }
-        if (this.grid.crudService.cell && NAVIGATION_KEYS.has(key)) { return; }
-
         const position = this.getNextPosition(this.activeNode.row, this.activeNode.column, key, shift, ctrl, event);
         if (NAVIGATION_KEYS.has(key)) {
             event.preventDefault();
@@ -231,23 +231,37 @@ export class IgxGridNavigationService {
         const gridRows = this.grid.verticalScrollContainer.totalItemCount ?? this.grid.dataView.length;
         if (gridRows < 1) { this.activeNode = null; return; }
         if (!Object.keys(this.activeNode).length || this.activeNode.row < 0 || this.activeNode.row > gridRows - 1) {
-            this.grid.navigateTo(0, 0, (obj) => {
+            const hasLastActiveNode = Object.keys(this.lastActiveNode).length;
+            const shouldClearSelection = hasLastActiveNode && (this.lastActiveNode.row < 0 || this.lastActiveNode.row > gridRows - 1);
+            this.setActiveNode(this.lastActiveNode.row >= 0 && this.lastActiveNode.row < gridRows ?
+                this.firstVisibleNode(this.lastActiveNode.row) : this.firstVisibleNode());
+            if (shouldClearSelection) {
                 this.grid.clearCellSelection();
-                obj.target.activate(event);
-            });
+                this.grid.navigateTo(this.activeNode.row, this.activeNode.column, (obj) => {
+                    obj.target?.activate(event);
+                    this.grid.cdr.detectChanges();
+                } );
+            } else {
+                const range = { rowStart: this.activeNode.row, rowEnd: this.activeNode.row,
+                    columnStart: this.activeNode.column, columnEnd: this.activeNode.column };
+                this.grid.selectRange(range);
+                this.grid.notifyChanges();
+            }
         }
     }
 
     focusFirstCell(header = true) {
         if ((header || this.grid.dataView.length) && this.activeNode &&
             (this.activeNode.row === -1 || this.activeNode.row === this.grid.dataView.length ||
                 (!header && !this.grid.hasSummarizedColumns))) { return; }
+            const shouldScrollIntoView = this.lastActiveNode && (header && this.lastActiveNode.row !== -1) ||
+                (!header && this.lastActiveNode.row !== this.grid.dataView.length);
+            this.setActiveNode(this.firstVisibleNode(header ? -1 : this.grid.dataView.length));
+            if (shouldScrollIntoView) {
+                this.performHorizontalScrollToCell(this.activeNode.column);
+            }
+            this.grid.notifyChanges();
 
-        this.setActiveNode({
-            row: header ? -1 : this.grid.dataView.length, column: 0,
-            level: this.grid.hasColumnLayouts ? 1 : 0, mchCache: { level: 0, visibleIndex: 0 }
-        });
-        this.performHorizontalScrollToCell(0);
     }
 
     get lastColumnIndex() {
@@ -262,6 +276,19 @@ export class IgxGridNavigationService {
     get containerTopOffset() {
         return parseInt(this.grid.verticalScrollContainer.dc.instance._viewContainer.element.nativeElement.style.top, 10);
     }
+    private  firstVisibleNode(rowIndex?) {
+        const colIndex = this.lastActiveNode.column !== undefined ? this.lastActiveNode.column :
+            this.grid.visibleColumns.sort((c1, c2) => c1.visibleIndex - c2.visibleIndex)
+            .find(c => this.isColumnFullyVisible(c.visibleIndex))?.visibleIndex;
+        const column = this.grid.visibleColumns.find((col) => !col.columnLayout && col.visibleIndex === colIndex);
+        const rowInd = rowIndex ? rowIndex : this.grid.rowList.find(r => !this.shouldPerformVerticalScroll(r.index, colIndex))?.index;
+        const node = { row: rowInd ?? 0,
+            column: column?.visibleIndex ?? 0, level: column?.level ?? 0,
+            mchCache: column ? {level: column.level, visibleIndex: column.visibleIndex} : {} as ColumnGroupsCache,
+            layout: column && column.columnLayoutChild ? { rowStart: column.rowStart, colStart: column.colStart,
+                rowEnd: column.rowEnd, colEnd: column.colEnd, columnVisibleIndex: column.visibleIndex} : null };
+        return node;
+    }
 
     public isColumnFullyVisible(columnIndex: number) {
         if (columnIndex < 0 || this.isColumnPinned(columnIndex, this.forOfDir())) {

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -3258,21 +3258,24 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             grid.displayDensity = DisplayDensity.compact;
             tick(200);
             fix.detectChanges();
+            spyOn(grid.onColumnVisibilityChanged, 'emit');
 
             const column = grid.columns.find((col) => col.field === 'ProductName');
             GridFunctions.verifyColumnIsHidden(column, false, 6);
 
             // Open excel style filtering component and hide 'ProductName' column through header icon
-            GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
-            tick(100);
-            fix.detectChanges();
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');
             GridFunctions.clickHideIconInExcelStyleFiltering(fix);
             tick(200);
             fix.detectChanges();
 
             // Verify Excel menu is closed
             expect(GridFunctions.getExcelStyleFilteringComponent(fix)).toBeNull();
-            GridFunctions.verifyColumnIsHidden(column, true, 5);
+            expect(grid.onColumnVisibilityChanged.emit).toHaveBeenCalledTimes(1);
+            expect(grid.onColumnVisibilityChanged.emit).toHaveBeenCalledWith({
+                column: column,
+                newValue: true
+            });
         }));
 
         it('Should move pinned column correctly by using move buttons', fakeAsync(() => {

projects/igniteui-angular/src/lib/grids/grid/grid-keyBoardNav-headers.spec.ts

@@ -70,10 +70,10 @@ describe('IgxGrid - Headers Keyboard navigation #grid', () => {
             fix.detectChanges();
 
             const header = GridFunctions.getColumnHeader('ID', fix);
-            expect(header).toBeTruthy();
-            expect(grid.navigation.activeNode.column).toEqual(0);
+            expect(header).not.toBeDefined();
+            expect(grid.navigation.activeNode.column).toEqual(3);
             expect(grid.navigation.activeNode.row).toEqual(-1);
-            expect(grid.headerContainer.getScroll().scrollLeft).toEqual(0);
+            expect(grid.headerContainer.getScroll().scrollLeft).toBeGreaterThanOrEqual(200);
             expect(grid.verticalScrollContainer.getScroll().scrollTop).toBeGreaterThanOrEqual(100);
         });
 

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

@@ -132,7 +132,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
             const args: IActiveNodeChangeEventArgs = {
                 row: 0,
                 column: 0,
-                level: undefined,
+                level: 0,
                 tag: 'dataCell'
             };
 
@@ -257,7 +257,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
             await wait(200);
             fix.detectChanges();
 
-            const cell = grid.getCellByColumn(0, 'col0');
+            const cell = grid.getCellByColumn(4, 'col5');
             expect(cell).toBeDefined();
             GridSelectionFunctions.verifyCellActive(cell);
             GridSelectionFunctions.verifyCellSelected(cell);
@@ -708,8 +708,8 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
             fix.detectChanges();
 
             const row = grid.getRowByIndex(0);
-            expect(row).toBeDefined();
-            expect(grid.verticalScrollContainer.getScroll().scrollTop).toEqual(0);
+            expect(row).not.toBeDefined();
+            expect(grid.verticalScrollContainer.getScroll().scrollTop).toBeGreaterThanOrEqual(100);
         });
 
         it('should toggle expand/collapse state of group row with ArrowRight/ArrowLeft key.', () => {