Merge pull request #16522 from IgniteUI/bpachilova/ariaHidden-header-groups-fix-16517-19.2.x

fix(grid): address null TypeError on focusing a grid with no data and column headers - 19.2.x

Author: kacheshmarova

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

@@ -204,6 +204,27 @@ describe('IgxGrid - multi-column headers #grid', () => {
             }
         }));
 
+        it('The ariaHidden getter should not throw when the grid has no active node (#16517)', fakeAsync(() => {
+            fixture = TestBed.createComponent(BlueWhaleGridComponent) as ComponentFixture<BlueWhaleGridComponent>;
+            tick();
+            fixture.detectChanges();
+
+            // The grid active node will be null if there is no data and the body is focused
+            grid = fixture.componentInstance.grid;
+            grid.data = [];
+
+            tick();
+            fixture.detectChanges();
+
+            const gridContent = GridFunctions.getGridContent(fixture);
+
+            expect(() => {
+                gridContent.triggerEventHandler('focus', null);
+                tick(400);
+                fixture.detectChanges();
+            }).not.toThrow();
+        }));
+
         it('Should render dynamic column group header correctly (#12165).', () => {
             fixture = TestBed.createComponent(BlueWhaleGridComponent) as ComponentFixture<BlueWhaleGridComponent>;
             (fixture as ComponentFixture<BlueWhaleGridComponent>).componentInstance.firstGroupRepeats = 1;

projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts

@@ -161,7 +161,7 @@ export class IgxGridHeaderGroupComponent implements DoCheck {
      * @hidden
      */
     public get ariaHidden(): boolean {
-        return this.grid.hasColumnGroups && (this.column.hidden || this.grid.navigation.activeNode.row !== -1);
+        return this.grid.hasColumnGroups && (this.column.hidden || this.grid.navigation.activeNode?.row !== -1);
     }
 
     /**

projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts

@@ -118,7 +118,7 @@ export class IgxGridHeaderRowComponent implements DoCheck {
     * @internal
     */
     public get isLeafHeaderAriaHidden(): boolean {
-        return this.grid.navigation.activeNode.row === -1;
+        return this.grid.navigation.activeNode?.row === -1;
     }
 
     /** The virtualized part of the header row containing the unpinned header groups. */