diff --git a/src/lib/tabs/tab-header.spec.ts b/src/lib/tabs/tab-header.spec.ts index 2d81b0e2edf2..d5f74d439607 100644 --- a/src/lib/tabs/tab-header.spec.ts +++ b/src/lib/tabs/tab-header.spec.ts @@ -604,6 +604,26 @@ describe('MatTabHeader', () => { expect(tabHeaderElement.classList).toContain(enabledClass); }); + it('scroll to last tab', () => { + fixture = TestBed.createComponent(SimpleTabHeaderApp); + appComponent = fixture.componentInstance; + appComponent.tabs = [ + {label: 'tab one'}, + {label: 'tab two'}, + {label: 'tab three'}, + {label: 'tab four'}, + {label: 'tab five'}, + {label: 'tab six'}, + {label: 'tab seven'}, + {label: 'tab eight'}, + ]; + appComponent.tabHeader.selectedIndex = 8; + + fixture.componentRef.changeDetectorRef.markForCheck(); + + expect(appComponent.tabHeader.scrollDistance) + .toBe(appComponent.tabHeader._getMaxScrollDistance()); + }); }); }); diff --git a/src/lib/tabs/tab-header.ts b/src/lib/tabs/tab-header.ts index 60d856189ce4..2c4ae8d6c87e 100644 --- a/src/lib/tabs/tab-header.ts +++ b/src/lib/tabs/tab-header.ts @@ -247,6 +247,7 @@ export class MatTabHeader extends _MatTabHeaderMixinBase const dirChange = this._dir ? this._dir.change : observableOf(null); const resize = this._viewportRuler.change(150); const realign = () => { + this._scrollToLabel(this._selectedIndex); this.updatePagination(); this._alignInkBarToSelectedTab(); };