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 0003d8f)

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;
 }