diff --git a/src/material/tabs/tab-group.spec.ts b/src/material/tabs/tab-group.spec.ts index e4cb95cd4667..11a25a038aee 100644 --- a/src/material/tabs/tab-group.spec.ts +++ b/src/material/tabs/tab-group.spec.ts @@ -6,7 +6,14 @@ import {By} from '@angular/platform-browser'; import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations'; import {CommonModule} from '@angular/common'; import {Observable} from 'rxjs'; -import {MatTab, MatTabGroup, MatTabHeaderPosition, MatTabsModule, MAT_TABS_CONFIG} from './index'; +import { + MatTab, + MatTabGroup, + MatTabHeader, + MatTabHeaderPosition, + MatTabsModule, + MAT_TABS_CONFIG +} from './index'; describe('MatTabGroup', () => { @@ -298,6 +305,22 @@ describe('MatTabGroup', () => { expect(tabLabelNativeElements.every(el => el.classList.contains('mat-focus-indicator'))) .toBe(true); }); + + it('should be able to programmatically focus a particular tab', () => { + fixture.detectChanges(); + const tabGroup: MatTabGroup = + fixture.debugElement.query(By.css('mat-tab-group')).componentInstance; + const tabHeader: MatTabHeader = + fixture.debugElement.query(By.css('mat-tab-header')).componentInstance; + + expect(tabHeader.focusIndex).not.toBe(3); + + tabGroup.focusTab(3); + fixture.detectChanges(); + + expect(tabHeader.focusIndex).not.toBe(3); + }); + }); describe('aria labelling', () => { diff --git a/src/material/tabs/tab-group.ts b/src/material/tabs/tab-group.ts index 500bd997d73a..f3c41110fbd7 100644 --- a/src/material/tabs/tab-group.ts +++ b/src/material/tabs/tab-group.ts @@ -286,6 +286,18 @@ export abstract class _MatTabGroupBase extends _MatTabGroupMixinBase implements } } + /** + * Sets focus to a particular tab. + * @param index Index of the tab to be focused. + */ + focusTab(index: number) { + const header = this._tabHeader; + + if (header) { + header.focusIndex = index; + } + } + _focusChanged(index: number) { this.focusChange.emit(this._createChangeEvent(index)); } diff --git a/tools/public_api_guard/material/tabs.d.ts b/tools/public_api_guard/material/tabs.d.ts index 262add0b7b99..88a7ca735b54 100644 --- a/tools/public_api_guard/material/tabs.d.ts +++ b/tools/public_api_guard/material/tabs.d.ts @@ -58,6 +58,7 @@ export declare abstract class _MatTabGroupBase extends _MatTabGroupMixinBase imp _handleClick(tab: MatTab, tabHeader: MatTabGroupBaseHeader, index: number): void; _removeTabBodyWrapperHeight(): void; _setTabBodyWrapperHeight(tabHeight: number): void; + focusTab(index: number): void; ngAfterContentChecked(): void; ngAfterContentInit(): void; ngOnDestroy(): void;