Skip to content

Commit 812f213

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 6aa7727 commit 812f213

File tree

3 files changed

+41
-8
lines changed

3 files changed

+41
-8
lines changed

src/lib/chips/chip-list.ts

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -432,7 +432,11 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
432432
* Implemented as part of MatFormFieldControl.
433433
* @docs-private
434434
*/
435-
onContainerClick() { this.focus(); }
435+
onContainerClick(event: MouseEvent) {
436+
if (!this._originatesFromChip(event)) {
437+
this.focus();
438+
}
439+
}
436440

437441
/**
438442
* Focuses the the first non-disabled chip in this chip list, or the associated input when there
@@ -734,4 +738,19 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
734738
}
735739
});
736740
}
741+
742+
/** Checks whether an event comes from inside a chip element. */
743+
private _originatesFromChip(event: Event): boolean {
744+
let currentElement = event.target as HTMLElement | null;
745+
746+
while (currentElement && currentElement !== this._elementRef.nativeElement) {
747+
if (currentElement.classList.contains('mat-chip')) {
748+
return true;
749+
}
750+
751+
currentElement = currentElement.parentElement;
752+
}
753+
754+
return false;
755+
}
737756
}

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 & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -322,15 +322,11 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
322322
}
323323
}
324324

325-
/** Ensures events fire properly upon click. */
325+
/** Handles click events on the chip. */
326326
_handleClick(event: Event) {
327-
// Check disabled
328327
if (this.disabled) {
329-
return;
328+
event.preventDefault();
330329
}
331-
332-
event.preventDefault();
333-
event.stopPropagation();
334330
}
335331

336332
/** Handle custom key presses. */

0 commit comments

Comments
 (0)