From 4c69d18df20b37a9af69aff3353ef670e4129dd3 Mon Sep 17 00:00:00 2001 From: ahong11 Date: Tue, 9 Mar 2021 09:37:12 -0500 Subject: [PATCH] fix(material-experimental/mdc-chips): remove icon click interaction (#22132) Fixes an issue in the `mdc-chip` component where clicking the remove icon would select the chip before removing it. (cherry picked from commit 0003d8fdefc58c7cbedb12aac9609774f3fc197a) --- src/material-experimental/mdc-chips/chip-icons.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/material-experimental/mdc-chips/chip-icons.ts b/src/material-experimental/mdc-chips/chip-icons.ts index 3bcb3b64fe5b..aecfef8a4507 100644 --- a/src/material-experimental/mdc-chips/chip-icons.ts +++ b/src/material-experimental/mdc-chips/chip-icons.ts @@ -173,7 +173,7 @@ const _MatChipRemoveMixinBase: mdc-chip__icon mdc-chip__icon--trailing`, '[tabIndex]': 'tabIndex', 'role': 'button', - '(click)': 'interaction.next($event)', + '(click)': '_handleClick($event)', '(keydown)': 'interaction.next($event)', // We need to remove this explicitly, because it gets inherited from MatChipTrailingIcon. @@ -196,6 +196,13 @@ export class MatChipRemove extends _MatChipRemoveMixinBase implements CanDisable } } + /** Emits a MouseEvent when the user clicks on the remove icon. */ + _handleClick(event: MouseEvent): void { + this.interaction.next(event); + + event.stopPropagation(); + } + static ngAcceptInputType_disabled: BooleanInput; static ngAcceptInputType_tabIndex: NumberInput; }