diff --git a/src/app/components/tabmenu/tabmenu.ts b/src/app/components/tabmenu/tabmenu.ts index 77aa1165c53..1a38d3ba7ed 100644 --- 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 index 32918522f9a..24b8427b437 100755 --- 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 } ]; -} +} \ No newline at end of file