Merge pull request #15982 from primefaces/issue-15973

Fixed #15973 - TabMenu doesn't scroll to active item when it's set pr…
primefaces · Jul 25, 2024 · 0d7c90c · 0d7c90c
2 parents f0f1a1c + 96fc148
commit 0d7c90c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 15 deletions.
diff --git a/src/app/components/tabmenu/tabmenu.ts b/src/app/components/tabmenu/tabmenu.ts
@@ -16,6 +16,7 @@ import {
     Output,
     PLATFORM_ID,
     QueryList,
+    SimpleChanges,
     TemplateRef,
     ViewChild,
     ViewChildren,
@@ -225,7 +226,7 @@ export class TabMenu implements AfterContentInit, AfterViewInit, AfterViewChecke
 
     forwardIsDisabled: boolean = false;
 
-    private timerIdForInitialAutoScroll: any = null;
+    private timerIdForAutoScroll: any = null;
 
     _focusableItems: MenuItem[] | undefined | any;
 
@@ -246,17 +247,18 @@ export class TabMenu implements AfterContentInit, AfterViewInit, AfterViewChecke
         return this._focusableItems;
     }
 
-    constructor(
-        @Inject(PLATFORM_ID) private platformId: any,
-        private router: Router,
-        private route: ActivatedRoute,
-        private cd: ChangeDetectorRef
-    ) {
+    constructor(@Inject(PLATFORM_ID) private platformId: any, private router: Router, private route: ActivatedRoute, private cd: ChangeDetectorRef) {
         this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((event: NavigationEnd) => {
             this.cd.markForCheck();
         });
     }
 
+    ngOnChanges(simpleChange: SimpleChanges) {
+        if (simpleChange.activeItem) {
+            this.autoScrollForActiveItem();
+        }
+    }
+
     ngAfterContentInit() {
         this.templates?.forEach((item) => {
             switch (item.getType()) {
@@ -282,7 +284,7 @@ export class TabMenu implements AfterContentInit, AfterViewInit, AfterViewChecke
     ngAfterViewInit(): void {
         if (isPlatformBrowser(this.platformId)) {
             this.updateInkBar();
-            this.initAutoScrollForActiveItem();
+            this.autoScrollForActiveItem();
             this.initButtonState();
         }
     }
@@ -460,7 +462,9 @@ export class TabMenu implements AfterContentInit, AfterViewInit, AfterViewChecke
             return;
         }
 
-        tabHeader.scrollIntoView({ block: 'nearest', inline: 'center' });
+        if (tabHeader && typeof tabHeader.scrollIntoView === 'function') {
+            tabHeader.scrollIntoView({ block: 'nearest', inline: 'center' });
+        }
     }
 
     onScroll(event: Event) {
@@ -484,14 +488,14 @@ export class TabMenu implements AfterContentInit, AfterViewInit, AfterViewChecke
         content.scrollLeft = pos >= lastPos ? lastPos : pos;
     }
 
-    private initAutoScrollForActiveItem(): void {
+    private autoScrollForActiveItem(): void {
         if (!this.scrollable) {
             return;
         }
 
         this.clearAutoScrollHandler();
         // We have to wait for the rendering and then can scroll to element.
-        this.timerIdForInitialAutoScroll = setTimeout(() => {
+        this.timerIdForAutoScroll = setTimeout(() => {
             const activeItem = (this.model as MenuItem[]).findIndex((menuItem) => this.isActive(menuItem));
 
             if (activeItem !== -1) {
@@ -501,9 +505,9 @@ export class TabMenu implements AfterContentInit, AfterViewInit, AfterViewChecke
     }
 
     private clearAutoScrollHandler(): void {
-        if (this.timerIdForInitialAutoScroll) {
-            clearTimeout(this.timerIdForInitialAutoScroll);
-            this.timerIdForInitialAutoScroll = null;
+        if (this.timerIdForAutoScroll) {
+            clearTimeout(this.timerIdForAutoScroll);
+            this.timerIdForAutoScroll = null;
         }
     }
 

diff --git a/src/app/showcase/pages/tabmenu/tabmenudemo.ts b/src/app/showcase/pages/tabmenu/tabmenudemo.ts
@@ -54,4 +54,4 @@ export class TabMenuDemo {
             component: AccessibilityDoc
         }
     ];
-}
+}