Skip to content

Commit

Permalink
fix(chips): default click action on chip being prevented (#12856)
Browse files Browse the repository at this point in the history
Fixes all the click actions on a chip being prevented. The action wasn't being prevented up until c82aca9 where it got moved out of the `if (this.disabled)`. Since there isn't any info or tests around why it was done this way, I'm assuming that it was by accident.

Fixes #9032.
  • Loading branch information
crisbeto authored and jelbourn committed Sep 14, 2018
1 parent 20beff4 commit ae3ce4a
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 8 deletions.
21 changes: 20 additions & 1 deletion src/lib/chips/chip-list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -437,7 +437,11 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
onContainerClick() { this.focus(); }
onContainerClick(event: MouseEvent) {
if (!this._originatesFromChip(event)) {
this.focus();
}
}

/**
* Focuses the the first non-disabled chip in this chip list, or the associated input when there
Expand Down Expand Up @@ -739,4 +743,19 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
}
});
}

/** Checks whether an event comes from inside a chip element. */
private _originatesFromChip(event: Event): boolean {
let currentElement = event.target as HTMLElement | null;

while (currentElement && currentElement !== this._elementRef.nativeElement) {
if (currentElement.classList.contains('mat-chip')) {
return true;
}

currentElement = currentElement.parentElement;
}

return false;
}
}
20 changes: 19 additions & 1 deletion src/lib/chips/chip.spec.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {Directionality} from '@angular/cdk/bidi';
import {BACKSPACE, DELETE, SPACE} from '@angular/cdk/keycodes';
import {createKeyboardEvent} from '@angular/cdk/testing';
import {createKeyboardEvent, dispatchFakeEvent} from '@angular/cdk/testing';
import {Component, DebugElement} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {By} from '@angular/platform-browser';
Expand Down Expand Up @@ -132,6 +132,24 @@ describe('Chips', () => {

expect(testComponent.chipRemove).toHaveBeenCalledWith({chip: chipInstance});
});

it('should not prevent the default click action', () => {
const event = dispatchFakeEvent(chipNativeElement, 'click');
fixture.detectChanges();

expect(event.defaultPrevented).toBe(false);
});

it('should prevent the default click action when the chip is disabled', () => {
chipInstance.disabled = true;
fixture.detectChanges();

const event = dispatchFakeEvent(chipNativeElement, 'click');
fixture.detectChanges();

expect(event.defaultPrevented).toBe(true);
});

});

describe('keyboard behavior', () => {
Expand Down
10 changes: 4 additions & 6 deletions src/lib/chips/chip.ts
Original file line number Diff line number Diff line change
Expand Up @@ -326,15 +326,13 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
}
}

/** Ensures events fire properly upon click. */
/** Handles click events on the chip. */
_handleClick(event: Event) {
// Check disabled
if (this.disabled) {
return;
event.preventDefault();
} else {
event.stopPropagation();
}

event.preventDefault();
event.stopPropagation();
}

/** Handle custom key presses. */
Expand Down

0 comments on commit ae3ce4a

Please sign in to comment.