fix(pivot-grid): highlight the row header that Home and End scroll to

CHANGELOG.md

@@ -122,6 +122,7 @@ All notable changes for each version of this project will be documented in this
     - Setting `data` before the grid is initialized while `autoGenerate` is enabled no longer throws an error. In Ignite UI for Web Components this happened when `data` was set on `igc-tree-grid` before the element was attached to the page.
 - `IgxPivotGridComponent`
     - Autosizing a column now fits its content, instead of keeping its current width.
+    - In the horizontal row layout, a key press that scrolls to another row dimension header, such as `Home` or `End`, now highlights that header. Previously the header that was active before the key press stayed highlighted (#17932).
 - Ignite UI for Web Components grids
     - Writable properties that are not inputs, such as `selected` of `igc-column` and `totalPages` of `igc-paginator`, are now applied when set on the element. Previously the value was ignored and an `NG0303` error was logged.
     - The deprecated `getFilterFactory` method is now available on `igc-grid`, as intended for backwards compatibility.

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

@@ -114,7 +114,9 @@ export class IgxPivotGridNavigationService extends IgxGridNavigationService {
             }
 
             this.setActiveNode(newActiveNode);
-            if (!this.grid.hasHorizontalLayout && verticalContainer.isIndexOutsideView(newActiveNode.row)) {
+            if (this.grid.hasHorizontalLayout) {
+                this.grid.notifyChanges();
+            } else if (verticalContainer.isIndexOutsideView(newActiveNode.row)) {
                 verticalContainer.scrollTo(newActiveNode.row);
             }
         } else {

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

@@ -1,7 +1,8 @@
-import { SimpleChange } from '@angular/core';
+import { provideZonelessChangeDetection, SimpleChange } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { firstValueFrom } from 'rxjs';
 import {
     ColumnPinningPosition,
     FilteringExpressionsTree,
@@ -4664,6 +4665,50 @@ describe('IgxPivotGrid #pivotGrid', () => {
         });
     });
 
+    describe('IgxPivotGrid Horizontal Layout zoneless #pivotGrid', () => {
+        beforeEach(() => {
+            TestBed.configureTestingModule({ providers: [provideZonelessChangeDetection()] });
+        });
+
+        it('should highlight the row dimension header that End and Home scroll to.', async () => {
+            const fixture = TestBed.createComponent(IgxPivotGridTestComplexHierarchyComponent);
+            fixture.detectChanges();
+            const pivotGrid = fixture.componentInstance.pivotGrid;
+            pivotGrid.pivotUI = { showRowHeaders: true, rowLayout: PivotRowLayoutType.Horizontal };
+            pivotGrid.data = Array.from({ length: 40 }, (_, i) => ({
+                ProductCategory: i % 2 ? 'Bikes' : 'Clothing', City: `City ${i}`, Country: 'Bulgaria', Date: '01/01/2012', UnitsSold: i
+            }));
+            pivotGrid.pivotConfiguration.rows = [{
+                memberName: 'AllProducts', memberFunction: () => 'All Products', enabled: true, horizontalSummary: true,
+                childLevel: { memberName: 'ProductCategory', enabled: true, horizontalSummary: true, childLevel: { memberName: 'City', enabled: true } }
+            }];
+            pivotGrid.pipeTrigger++;
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const headers = () => fixture.debugElement.queryAll(By.directive(IgxPivotRowDimensionHeaderComponent));
+            const activeHeaders = () => headers()
+                .filter(x => x.parent.nativeElement.classList.contains('igx-grid-th--active'))
+                .map(x => x.componentInstance.column.header);
+            const container = fixture.debugElement.query(By.css('.igx-grid__tbody-pivot-mrl-dimension')).nativeElement;
+            const pressKey = async (key: string) => {
+                const activeNodeChanged = firstValueFrom(pivotGrid.activeNodeChange);
+                UIInteractions.triggerKeyDownEvtUponElem(key, container);
+                await activeNodeChanged;
+                await fixture.whenStable();
+            };
+
+            UIInteractions.simulateClickAndSelectEvent(headers().find(x => x.componentInstance.column.header === 'All Products'));
+            await fixture.whenStable();
+
+            await pressKey('End');
+            expect(activeHeaders()).toEqual(['All Products Total']);
+
+            await pressKey('Home');
+            expect(activeHeaders()).toEqual(['All Products']);
+        });
+    });
+
     describe('Template directives #pivotGrid', () => {
         let fixture: ComponentFixture<IgxPivotGridTemplateDirectivesComponent>;