fix(tab-link): preventDefault action when disabled tab link is clicked. (#9357)

Author: josephperrott

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 {

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);
   }
 }

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');
 

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();
+    }
+  }
 }