Skip to content

Commit 289de51

Browse files
committed
fix(chips): default click action on chip being prevented
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.
1 parent 4ddbde9 commit 289de51

File tree

3 files changed

+41
-6
lines changed

3 files changed

+41
-6
lines changed

src/lib/chips/chip-list.ts

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -437,7 +437,11 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
437437
* Implemented as part of MatFormFieldControl.
438438
* @docs-private
439439
*/
440-
onContainerClick() { this.focus(); }
440+
onContainerClick(event: MouseEvent) {
441+
if (!this._originatesFromChip(event)) {
442+
this.focus();
443+
}
444+
}
441445

442446
/**
443447
* Focuses the the first non-disabled chip in this chip list, or the associated input when there
@@ -739,4 +743,19 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
739743
}
740744
});
741745
}
746+
747+
/** Checks whether an event comes from inside a chip element. */
748+
private _originatesFromChip(event: Event): boolean {
749+
let currentElement = event.target as HTMLElement | null;
750+
751+
while (currentElement && currentElement !== this._elementRef.nativeElement) {
752+
if (currentElement.classList.contains('mat-chip')) {
753+
return true;
754+
}
755+
756+
currentElement = currentElement.parentElement;
757+
}
758+
759+
return false;
760+
}
742761
}

src/lib/chips/chip.spec.ts

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {Directionality} from '@angular/cdk/bidi';
22
import {BACKSPACE, DELETE, SPACE} from '@angular/cdk/keycodes';
3-
import {createKeyboardEvent} from '@angular/cdk/testing';
3+
import {createKeyboardEvent, dispatchFakeEvent} from '@angular/cdk/testing';
44
import {Component, DebugElement} from '@angular/core';
55
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
66
import {By} from '@angular/platform-browser';
@@ -132,6 +132,24 @@ describe('Chips', () => {
132132

133133
expect(testComponent.chipRemove).toHaveBeenCalledWith({chip: chipInstance});
134134
});
135+
136+
it('should not prevent the default click action', () => {
137+
const event = dispatchFakeEvent(chipNativeElement, 'click');
138+
fixture.detectChanges();
139+
140+
expect(event.defaultPrevented).toBe(false);
141+
});
142+
143+
it('should prevent the default click action when the chip is disabled', () => {
144+
chipInstance.disabled = true;
145+
fixture.detectChanges();
146+
147+
const event = dispatchFakeEvent(chipNativeElement, 'click');
148+
fixture.detectChanges();
149+
150+
expect(event.defaultPrevented).toBe(true);
151+
});
152+
135153
});
136154

137155
describe('keyboard behavior', () => {

src/lib/chips/chip.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -326,14 +326,12 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
326326
}
327327
}
328328

329-
/** Ensures events fire properly upon click. */
329+
/** Handles click events on the chip. */
330330
_handleClick(event: Event) {
331-
// Check disabled
332331
if (this.disabled) {
333-
return;
332+
event.preventDefault();
334333
}
335334

336-
event.preventDefault();
337335
event.stopPropagation();
338336
}
339337

0 commit comments

Comments
 (0)