fix(material/chips): don't prevent default mousedown action (#26765)

The chip row was calling `preventDefault` on `mousedown` events in order to avoid sending focus to the chip grid which in turn moves it to the first chip. This is problematic, because preventing the default `mousedown` action also stops native drag&drop and `click` events.

These changes resolve to original issue by making the chip focusable on clicks and forwarding focus through there.

Author: crisbeto

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

@@ -96,11 +96,8 @@ describe('MDC-based Row Chips', () => {
         expect(testComponent.chipRemove).toHaveBeenCalledWith({chip: chipInstance});
       });
 
-      it('should prevent the default click action', () => {
-        const event = dispatchFakeEvent(chipNativeElement, 'mousedown');
-        fixture.detectChanges();
-
-        expect(event.defaultPrevented).toBe(true);
+      it('should have a tabindex', () => {
+        expect(chipNativeElement.getAttribute('tabindex')).toBe('-1');
       });
 
       it('should have the correct role', () => {
@@ -189,8 +186,8 @@ describe('MDC-based Row Chips', () => {
       });
 
       describe('focus management', () => {
-        it('sends focus to first grid cell on mousedown', () => {
-          dispatchFakeEvent(chipNativeElement, 'mousedown');
+        it('sends focus to first grid cell on root chip focus', () => {
+          dispatchFakeEvent(chipNativeElement, 'focus');
           fixture.detectChanges();
 
           expect(document.activeElement).toHaveClass('mdc-evolution-chip__action--primary');

src/material/chips/chip-row.ts

@@ -62,12 +62,14 @@ export interface MatChipEditedEvent extends MatChipEvent {
     '[class.mat-mdc-chip-highlighted]': 'highlighted',
     '[class.mat-mdc-chip-with-trailing-icon]': '_hasTrailingIcon()',
     '[id]': 'id',
-    '[attr.tabindex]': 'null',
+    // Has to have a negative tabindex in order to capture
+    // focus and redirect it to the primary action.
+    '[attr.tabindex]': 'disabled ? null : -1',
     '[attr.aria-label]': 'null',
     '[attr.aria-description]': 'null',
     '[attr.role]': 'role',
-    '(mousedown)': '_mousedown($event)',
-    '(dblclick)': '_doubleclick($event)',
+    '(focus)': '_handleFocus($event)',
+    '(dblclick)': '_handleDoubleclick($event)',
   },
   providers: [
     {provide: MatChip, useExisting: MatChipRow},
@@ -137,13 +139,9 @@ export class MatChipRow extends MatChip implements AfterViewInit {
   }
 
   /** Sends focus to the first gridcell when the user clicks anywhere inside the chip. */
-  _mousedown(event: MouseEvent) {
-    if (!this._isEditing) {
-      if (!this.disabled) {
-        this.focus();
-      }
-
-      event.preventDefault();
+  _handleFocus() {
+    if (!this._isEditing && !this.disabled) {
+      this.focus();
     }
   }
 
@@ -163,7 +161,7 @@ export class MatChipRow extends MatChip implements AfterViewInit {
     }
   }
 
-  _doubleclick(event: MouseEvent) {
+  _handleDoubleclick(event: MouseEvent) {
     if (!this.disabled && this.editable) {
       this._startEditing(event);
     }

tools/public_api_guard/material/chips.md

@@ -392,17 +392,17 @@ export class MatChipRow extends MatChip implements AfterViewInit {
     contentEditInput?: MatChipEditInput;
     defaultEditInput?: MatChipEditInput;
     // (undocumented)
-    _doubleclick(event: MouseEvent): void;
-    // (undocumented)
     editable: boolean;
     readonly edited: EventEmitter<MatChipEditedEvent>;
     // (undocumented)
+    _handleDoubleclick(event: MouseEvent): void;
+    _handleFocus(): void;
+    // (undocumented)
     _handleKeydown(event: KeyboardEvent): void;
     // (undocumented)
     _hasTrailingIcon(): boolean;
     // (undocumented)
     _isEditing: boolean;
-    _mousedown(event: MouseEvent): void;
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<MatChipRow, "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", never, { "color": "color"; "disabled": "disabled"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; "editable": "editable"; }, { "edited": "edited"; }, ["contentEditInput"], ["mat-chip-avatar, [matChipAvatar]", "*", "[matChipEditInput]", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], false, never>;
     // (undocumented)