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

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

Fixes #10354.

Author: crisbeto

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

@@ -24,6 +24,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';
@@ -150,21 +150,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

@@ -180,7 +180,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
@@ -259,13 +258,4 @@ export class MatTabLink extends _MatTabLinkMixinBase
       this._focusMonitor.stopMonitoring(this._elementRef);
     }
   }
-
-  /**
-   * Handles the click event, preventing default navigation if the tab link is disabled.
-   */
-  _handleClick(event: MouseEvent) {
-    if (this.disabled) {
-      event.preventDefault();
-    }
-  }
 }