fix(pivot): Fix issues from review and testing

Author: dkamburov

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid-keyboard-nav.spec.ts

@@ -44,7 +44,7 @@ describe('IgxPivotGrid - Keyboard navigation #pivotGrid', () => {
         let  activeCells = fixture.debugElement.queryAll(By.css(`${ACTIVE_CELL_CSS_CLASS}`));
         expect(activeCells.length).toBe(1);
 
-        UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', pivotGrid.theadRow.nativeElement);
+        UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', firstCell.nativeElement);
         fixture.detectChanges();
         GridFunctions.verifyHeaderIsFocused(secondCell.parent);
         activeCells = fixture.debugElement.queryAll(By.css(`${ACTIVE_CELL_CSS_CLASS}`));
@@ -57,7 +57,7 @@ describe('IgxPivotGrid - Keyboard navigation #pivotGrid', () => {
         UIInteractions.simulateClickAndSelectEvent(firstCell);
         fixture.detectChanges();
 
-        UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', pivotGrid.theadRow.nativeElement);
+        UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', firstCell.nativeElement);
         fixture.detectChanges();
 
         GridFunctions.verifyHeaderIsFocused(firstCell.parent);
@@ -67,7 +67,7 @@ describe('IgxPivotGrid - Keyboard navigation #pivotGrid', () => {
         UIInteractions.simulateClickAndSelectEvent(thirdCell);
         fixture.detectChanges();
 
-        UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', pivotGrid.theadRow.nativeElement);
+        UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', thirdCell.nativeElement);
         fixture.detectChanges();
 
         GridFunctions.verifyHeaderIsFocused(thirdCell.parent);
@@ -81,13 +81,13 @@ describe('IgxPivotGrid - Keyboard navigation #pivotGrid', () => {
         UIInteractions.simulateClickAndSelectEvent(firstCell);
         fixture.detectChanges();
 
-        UIInteractions.triggerKeyDownEvtUponElem('End', pivotGrid.theadRow.nativeElement);
+        UIInteractions.triggerKeyDownEvtUponElem('End', firstCell.nativeElement);
         fixture.detectChanges();
         GridFunctions.verifyHeaderIsFocused(thirdCell.parent);
         let activeCells = fixture.debugElement.queryAll(By.css(`${ACTIVE_CELL_CSS_CLASS}`));
         expect(activeCells.length).toBe(1);
 
-        UIInteractions.triggerKeyDownEvtUponElem('Home', pivotGrid.theadRow.nativeElement);
+        UIInteractions.triggerKeyDownEvtUponElem('Home', thirdCell.nativeElement);
         fixture.detectChanges();
         GridFunctions.verifyHeaderIsFocused(firstCell.parent);
         activeCells = fixture.debugElement.queryAll(By.css(`${ACTIVE_CELL_CSS_CLASS}`));
@@ -100,7 +100,7 @@ describe('IgxPivotGrid - Keyboard navigation #pivotGrid', () => {
         UIInteractions.simulateClickAndSelectEvent(thirdCell);
         fixture.detectChanges();
 
-        UIInteractions.triggerKeyDownEvtUponElem('ArrowDown', pivotGrid.theadRow.nativeElement, true, false, false, true);
+        UIInteractions.triggerKeyDownEvtUponElem('ArrowDown', thirdCell.nativeElement, true, false, false, true);
         fixture.detectChanges();
 
         const allCells = fixture.debugElement.queryAll(

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

@@ -17,15 +17,15 @@ export class IgxPivotGridNavigationService extends IgxGridNavigationService {
         this.isRowHeaderActive = false;
     }
 
-    public headerNavigation(event: KeyboardEvent) {
-        const key = event.key.toLowerCase();
-        const ctrl = event.ctrlKey;
-        if (!HEADER_KEYS.has(key)) {
-            return;
-        }
-        event.preventDefault();
-
+    public handleNavigation(event: KeyboardEvent) {
         if (this.isRowHeaderActive) {
+            const key = event.key.toLowerCase();
+            const ctrl = event.ctrlKey;
+            if (!HEADER_KEYS.has(key)) {
+                return;
+            }
+            event.preventDefault();
+
             const newActiveNode = {
                 row: this.activeNode.row, column: this.activeNode.column, level: null,
                 mchCache: null,
@@ -47,7 +47,7 @@ export class IgxPivotGridNavigationService extends IgxGridNavigationService {
             this.setActiveNode(newActiveNode);
             this.grid.navigateTo(newActiveNode.row);
         } else {
-            super.headerNavigation(event);
+            super.handleNavigation(event);
         }
     }
 }

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts

@@ -11,7 +11,7 @@ import { IPivotDimension } from './pivot-grid.interface';
 /**
  * @hidden
  */
- @Component({
+@Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
     selector: 'igx-pivot-row-dimension-header-group',
     templateUrl: '../headers/grid-header-group.component.html'
@@ -24,8 +24,8 @@ export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroup
         public colResizingService: IgxColumnResizingService,
         public filteringService: IgxFilteringService,
         protected platform: PlatformUtil) {
-            super(cdRef, grid, elementRef, colResizingService, filteringService, platform);
-         }
+        super(cdRef, grid, elementRef, colResizingService, filteringService, platform);
+    }
 
     /**
      * @hidden
@@ -87,7 +87,7 @@ export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroup
                     result = row;
                 }
                 tempRow = tempRow.childLevel;
-            } while(tempRow)
+            } while (tempRow)
         });
         return result;
     }
@@ -97,4 +97,18 @@ export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroup
         this.grid.navigation.isRowHeader = true;
         this.grid.navigation.setActiveNode(this.activeNode);
     }
+
+    /**
+     * @hidden @internal
+     */
+    public pointerdown(_event: PointerEvent): void {
+        this.activate();
+    }
+
+    /**
+     * @hidden @internal
+     */
+    public onMouseDown(_event: MouseEvent): void {
+        this.activate();
+    }
 }

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

@@ -11,9 +11,7 @@
         </igx-buttongroup>
     </div>
     <igx-pivot-grid #grid1 [data]="origData" [width]="'100%'" [height]="'100%'" [defaultExpandState]='true'
-        [pivotConfiguration]="pivotConfigHierarchy" [rowSelection]="'single'" [columnSelection]="'single'"
-        (dimensionsChange)='dimensionChange($event)'
-        [cellSelection]="'single'">
+        [pivotConfiguration]="pivotConfigHierarchy" (dimensionsChange)='dimensionChange($event)'>
     </igx-pivot-grid>
 </div>
 

src/app/pivot-grid/pivot-grid.sample.scss

@@ -17,10 +17,7 @@ igx-pivot-grid {
     display: flex;
     gap: 16px;
     margin-bottom: 16px;
-
-    > * {
-        flex: 1;
-    }
+    flex-direction: column;
 }
 
 :host ::ng-deep {