diff --git a/src/lib/tabs/_tabs-common.scss b/src/lib/tabs/_tabs-common.scss index 4d413b67c2cc..8a55eaa172fb 100644 --- a/src/lib/tabs/_tabs-common.scss +++ b/src/lib/tabs/_tabs-common.scss @@ -19,7 +19,10 @@ $mat-tab-animation-duration: 500ms !default; &:focus { outline: none; - opacity: 1; + + &:not(.mat-tab-disabled) { + opacity: 1; + } } &.mat-tab-disabled { diff --git a/src/lib/tabs/_tabs-theme.scss b/src/lib/tabs/_tabs-theme.scss index a887e1acee86..1c2a0d65aeb9 100644 --- a/src/lib/tabs/_tabs-theme.scss +++ b/src/lib/tabs/_tabs-theme.scss @@ -83,7 +83,8 @@ } @mixin _mat-tab-label-focus($tab-focus-color) { - .mat-tab-label:focus, .mat-tab-link:focus { + .mat-tab-label:not(.mat-tab-disabled):focus, + .mat-tab-link:not(.mat-tab-disabled):focus { background-color: mat-color($tab-focus-color, lighter, 0.3); } } diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts index a1ef4c1eb796..006adc126291 100644 --- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts +++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts @@ -1,7 +1,7 @@ import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing'; import {Component, ViewChild} from '@angular/core'; import {By} from '@angular/platform-browser'; -import {dispatchFakeEvent, dispatchMouseEvent} from '@angular/cdk/testing'; +import {dispatchFakeEvent, dispatchMouseEvent, createMouseEvent} from '@angular/cdk/testing'; import {Direction, Directionality} from '@angular/cdk/bidi'; import {Subject} from 'rxjs/Subject'; import {MatTabLink, MatTabNav, MatTabsModule} from '../index'; @@ -125,6 +125,23 @@ describe('MatTabNavBar', () => { .toBe(true, 'Expected element to no longer be keyboard focusable if disabled.'); }); + it('should prevent default action for clicks if links are disabled', () => { + const tabLinkElement = fixture.debugElement.query(By.css('a')).nativeElement; + + const mouseEvent = createMouseEvent('click'); + spyOn(mouseEvent, 'preventDefault'); + tabLinkElement.dispatchEvent(mouseEvent); + expect(mouseEvent.preventDefault).not.toHaveBeenCalled(); + + fixture.componentInstance.disabled = true; + fixture.detectChanges(); + + const mouseEventWhileDisabled = createMouseEvent('click'); + spyOn(mouseEventWhileDisabled, 'preventDefault'); + tabLinkElement.dispatchEvent(mouseEventWhileDisabled); + expect(mouseEventWhileDisabled.preventDefault).toHaveBeenCalled(); + }); + it('should show ripples for tab links', () => { const tabLink = fixture.debugElement.nativeElement.querySelector('.mat-tab-link'); diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts index 46320209deec..69a566aab573 100644 --- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts +++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts @@ -189,6 +189,7 @@ export const _MatTabLinkMixinBase = '[attr.tabIndex]': 'tabIndex', '[class.mat-tab-disabled]': 'disabled', '[class.mat-tab-label-active]': 'active', + '(click)': '_handleClick($event)' } }) export class MatTabLink extends _MatTabLinkMixinBase @@ -245,4 +246,13 @@ export class MatTabLink extends _MatTabLinkMixinBase ngOnDestroy() { this._tabLinkRipple._removeTriggerEvents(); } + + /** + * Handles the click event, preventing default navigation if the tab link is disabled. + */ + _handleClick(event: MouseEvent) { + if (this.disabled) { + event.preventDefault(); + } + } }