diff --git a/src/material/tabs/tab-header.spec.ts b/src/material/tabs/tab-header.spec.ts index 45c0ba33d5b8..50d877631d70 100644 --- a/src/material/tabs/tab-header.spec.ts +++ b/src/material/tabs/tab-header.spec.ts @@ -604,6 +604,34 @@ describe('MatTabHeader', () => { expect(tabHeaderElement.classList).toContain(enabledClass); }); + it('should scroll to last tab', async(() => { + const tabs = [ + {label: 'tab one'}, + {label: 'tab one'}, + {label: 'tab one'}, + {label: 'tab one'}, + {label: 'tab one'}, + {label: 'tab one'}, + {label: 'tab one'}, + {label: 'tab one'}, + ]; + + fixture = TestBed.createComponent(SimpleTabHeaderApp); + fixture.detectChanges(); + + const component = fixture.componentInstance; + component.tabs = tabs; + component.selectedIndex = tabs.length - 1; + fixture.detectChanges(); + + fixture.whenRenderingDone() + .then(() => { + expect(component.tabHeader._disableScrollAfter).toBeTruthy(); + expect(component.tabHeader.scrollDistance) + .toEqual(component.tabHeader._getMaxScrollDistance()); + }); + })); + }); }); diff --git a/src/material/tabs/tab-header.ts b/src/material/tabs/tab-header.ts index 5783f1858f93..15edcc0c0ec7 100644 --- a/src/material/tabs/tab-header.ts +++ b/src/material/tabs/tab-header.ts @@ -238,6 +238,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(); };