fix(tabs): disabled tab link not preventing router navigation

Fixes users being able to navigate to a new route by clicking on a disabled `mat-tab-link`.

Fixes #10354.

Author: crisbeto

src/demo-app/tabs/tabs-demo.html

@@ -14,7 +14,7 @@ <h1>Tab Nav Bar</h1>
        [active]="rla.isActive">
       {{tabLink.label}}
     </a>
-    <a mat-tab-link disabled>Disabled Link</a>
+    <a routerLink="foggy-tab" mat-tab-link disabled>Disabled Link</a>
   </nav>
   <router-outlet></router-outlet>
 </div>

src/lib/tabs/tab-nav-bar/tab-nav-bar.scss

@@ -23,6 +23,14 @@
     flex-basis: 0;
     flex-grow: 1;
   }
+
+  &.mat-tab-disabled {
+    // We use `pointer-events` to make the element unclickable when it's disabled, rather than
+    // preventing the default action through JS, because we can't prevent the action reliably
+    // due to other directives potentially registering their events earlier. This shouldn't cause
+    // the user to click through, because we always have a `.mat-tab-links` behind the link.
+    pointer-events: none;
+  }
 }
 
 

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, ViewChildren, QueryList} from '@angular/core';
 import {By} from '@angular/platform-browser';
-import {dispatchFakeEvent, dispatchMouseEvent, createMouseEvent} from '@angular/cdk/testing';
+import {dispatchFakeEvent, dispatchMouseEvent} from '@angular/cdk/testing';
 import {Direction, Directionality} from '@angular/cdk/bidi';
 import {Subject} from 'rxjs';
 import {MatTabLink, MatTabNav, MatTabsModule} from '../index';
@@ -125,21 +125,15 @@ 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', () => {
+    it('should make disabled links unclickable', () => {
       const tabLinkElement = fixture.debugElement.query(By.css('a')).nativeElement;
 
-      const mouseEvent = createMouseEvent('click');
-      spyOn(mouseEvent, 'preventDefault');
-      tabLinkElement.dispatchEvent(mouseEvent);
-      expect(mouseEvent.preventDefault).not.toHaveBeenCalled();
+      expect(getComputedStyle(tabLinkElement).pointerEvents).not.toBe('none');
 
       fixture.componentInstance.disabled = true;
       fixture.detectChanges();
 
-      const mouseEventWhileDisabled = createMouseEvent('click');
-      spyOn(mouseEventWhileDisabled, 'preventDefault');
-      tabLinkElement.dispatchEvent(mouseEventWhileDisabled);
-      expect(mouseEventWhileDisabled.preventDefault).toHaveBeenCalled();
+      expect(getComputedStyle(tabLinkElement).pointerEvents).toBe('none');
     });
 
     it('should show ripples for tab links', () => {

src/lib/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -193,7 +193,6 @@ 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
@@ -254,13 +253,4 @@ 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();
-    }
-  }
 }