refactor(material/chips): run event through renderer

Fixes an event in the chip row that wasn't registered through the renderer.

(cherry picked from commit e36cf43)

Author: crisbeto

goldens/material/chips/index.api.md

@@ -435,7 +435,7 @@ export class MatChipRemove extends MatChipAction {
 }
 
 // @public
-export class MatChipRow extends MatChip implements AfterViewInit {
+export class MatChipRow extends MatChip implements AfterViewInit, OnDestroy {
     constructor(...args: unknown[]);
     // (undocumented)
     protected basicChipAttrName: string;
@@ -464,6 +464,8 @@ export class MatChipRow extends MatChip implements AfterViewInit {
     // (undocumented)
     ngAfterViewInit(): void;
     // (undocumented)
+    ngOnDestroy(): void;
+    // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<MatChipRow, "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", never, { "editable": { "alias": "editable"; "required": false; }; }, { "edited": "edited"; }, ["contentEditInput"], ["[matChipEdit]", "mat-chip-avatar, [matChipAvatar]", "[matChipEditInput]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipRow, never>;

src/material/chips/chip-row.ts

@@ -14,10 +14,13 @@ import {
   ContentChild,
   EventEmitter,
   Input,
+  OnDestroy,
   Output,
+  Renderer2,
   ViewChild,
   ViewEncapsulation,
   afterNextRender,
+  inject,
 } from '@angular/core';
 import {takeUntil} from 'rxjs/operators';
 import {MatChip, MatChipEvent} from './chip';
@@ -72,8 +75,10 @@ export interface MatChipEditedEvent extends MatChipEvent {
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [MatChipAction, MatChipEditInput],
 })
-export class MatChipRow extends MatChip implements AfterViewInit {
+export class MatChipRow extends MatChip implements AfterViewInit, OnDestroy {
   protected override basicChipAttrName = 'mat-basic-chip-row';
+  private _renderer = inject(Renderer2);
+  private _cleanupMousedown: (() => void) | undefined;
 
   /**
    * The editing action has to be triggered in a timeout. While we're waiting on it, a blur
@@ -123,12 +128,16 @@ export class MatChipRow extends MatChip implements AfterViewInit {
     super.ngAfterViewInit();
 
     // Sets _alreadyFocused (ahead of click) when chip already has focus.
-    this._ngZone.runOutsideAngular(() => {
-      this._elementRef.nativeElement.addEventListener(
-        'mousedown',
-        () => (this._alreadyFocused = this._hasFocus()),
-      );
-    });
+    this._cleanupMousedown = this._ngZone.runOutsideAngular(() =>
+      this._renderer.listen(this._elementRef.nativeElement, 'mousedown', () => {
+        this._alreadyFocused = this._hasFocus();
+      }),
+    );
+  }
+
+  override ngOnDestroy(): void {
+    super.ngOnDestroy();
+    this._cleanupMousedown?.();
   }
 
   protected _hasLeadingActionIcon() {