Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(tab-link): preventDefault action when disabled tab link is clicke…
…d. (#9357)
  • Loading branch information
josephperrott authored and jelbourn committed Jan 23, 2018
1 parent df44767 commit 8de5e83
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 3 deletions.
5 changes: 4 additions & 1 deletion src/lib/tabs/_tabs-common.scss
Expand Up @@ -19,7 +19,10 @@ $mat-tab-animation-duration: 500ms !default;

&:focus {
outline: none;
opacity: 1;

&:not(.mat-tab-disabled) {
opacity: 1;
}
}

&.mat-tab-disabled {
Expand Down
3 changes: 2 additions & 1 deletion src/lib/tabs/_tabs-theme.scss
Expand Up @@ -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);
}
}
Expand Down
19 changes: 18 additions & 1 deletion 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';
Expand Down Expand Up @@ -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');

Expand Down
10 changes: 10 additions & 0 deletions src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
Expand Up @@ -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
Expand Down Expand Up @@ -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();
}
}
}

0 comments on commit 8de5e83

Please sign in to comment.