use mousedown instead of timer on focus

Author: adolgachev

src/material/chips/chip-row.spec.ts

@@ -5,6 +5,7 @@ import {
   dispatchEvent,
   dispatchFakeEvent,
   dispatchKeyboardEvent,
+  dispatchMouseEvent,
 } from '@angular/cdk/testing/private';
 import {Component, DebugElement, ElementRef, ViewChild} from '@angular/core';
 import {ComponentFixture, TestBed, fakeAsync, flush, waitForAsync} from '@angular/core/testing';
@@ -248,19 +249,18 @@ describe('Row Chips', () => {
 
       it('should not begin editing on single click', () => {
         expect(chipNativeElement.querySelector('.mat-chip-edit-input')).toBeFalsy();
-        dispatchKeyboardEvent(chipNativeElement, 'click');
+        dispatchMouseEvent(chipNativeElement, 'click');
         fixture.detectChanges();
         expect(chipNativeElement.querySelector('.mat-chip-edit-input')).toBeFalsy();
       });
 
       it('should begin editing on single click when focused', fakeAsync(() => {
         expect(chipNativeElement.querySelector('.mat-chip-edit-input')).toBeFalsy();
-
         chipNativeElement.focus();
-        flush();
-        fixture.detectChanges();
 
-        dispatchKeyboardEvent(chipNativeElement, 'click');
+        // Need to also simulate the mousedown as that sets the already focused flag.
+        dispatchMouseEvent(chipNativeElement, 'mousedown');
+        dispatchMouseEvent(chipNativeElement, 'click');
         fixture.detectChanges();
         expect(chipNativeElement.querySelector('.mat-chip-edit-input')).toBeTruthy();
       }));
@@ -288,12 +288,11 @@ describe('Row Chips', () => {
 
         it('should not begin editing on single click when focused', fakeAsync(() => {
           expect(chipNativeElement.querySelector('.mat-chip-edit-input')).toBeFalsy();
-
           chipNativeElement.focus();
-          flush();
-          fixture.detectChanges();
 
-          dispatchKeyboardEvent(chipNativeElement, 'click');
+          // Need to also simulate the mousedown as that sets the already focused flag.
+          dispatchMouseEvent(chipNativeElement, 'mousedown');
+          dispatchMouseEvent(chipNativeElement, 'click');
           fixture.detectChanges();
           expect(chipNativeElement.querySelector('.mat-chip-edit-input')).toBeFalsy();
         }));
@@ -322,12 +321,11 @@ describe('Row Chips', () => {
 
         it('should not begin editing on single click when focused', fakeAsync(() => {
           expect(chipNativeElement.querySelector('.mat-chip-edit-input')).toBeFalsy();
-
           chipNativeElement.focus();
-          flush();
-          fixture.detectChanges();
 
-          dispatchKeyboardEvent(chipNativeElement, 'click');
+          // Need to also simulate the mousedown as that sets the already focused flag.
+          dispatchMouseEvent(chipNativeElement, 'mousedown');
+          dispatchMouseEvent(chipNativeElement, 'click');
           fixture.detectChanges();
           expect(chipNativeElement.querySelector('.mat-chip-edit-input')).toBeFalsy();
         }));

src/material/chips/chip-row.ts

@@ -60,6 +60,7 @@ export interface MatChipEditedEvent extends MatChipEvent {
     '[attr.aria-description]': 'null',
     '[attr.role]': 'role',
     '(focus)': '_handleFocus()',
+    '(mousedown)': '_handleMouseDown($event)',
     '(click)': '_handleClick($event)',
     '(dblclick)': '_handleDoubleclick($event)',
   },
@@ -94,7 +95,7 @@ export class MatChipRow extends MatChip implements AfterViewInit {
   @ContentChild(MatChipEditInput) contentEditInput?: MatChipEditInput;
 
   /**
-   * Set with a timeout when the chips has been focused via mouse or keyboard.
+   * Set on a mousedown when the chip is already focused via mouse or keyboard.
    *
    * This allows us to ensure chip is already focused when deciding whether to enter the
    * edit mode on a subsequent click. Otherwise, the chip appears focused when handling the
@@ -116,14 +117,6 @@ export class MatChipRow extends MatChip implements AfterViewInit {
       }
       this._alreadyFocused = false;
     });
-    this._onFocus.pipe(takeUntil(this.destroyed)).subscribe(() => {
-      if (!this._isEditing && !this.disabled) {
-        // Need a timeout to ensure flag not set while handling the first click.
-        this._ngZone.runOutsideAngular(() => {
-          setTimeout(() => (this._alreadyFocused = true), 100);
-        });
-      }
-    });
   }
 
   override _hasTrailingIcon() {
@@ -154,6 +147,11 @@ export class MatChipRow extends MatChip implements AfterViewInit {
     }
   }
 
+  /** Sets _alreadyFocused (ahead of click) when chip already has focus. */
+  _handleMouseDown(event: MouseEvent) {
+    this._alreadyFocused = this._hasFocus();
+  }
+
   _handleClick(event: MouseEvent) {
     if (!this.disabled && this.editable && !this._isEditing && this._alreadyFocused) {
       this._startEditing(event);