diff --git a/src/material/chips/chip-row.spec.ts b/src/material/chips/chip-row.spec.ts index 7ca159ccc975..8f19c99ba443 100644 --- a/src/material/chips/chip-row.spec.ts +++ b/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 tabidex', () => { + 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'); diff --git a/src/material/chips/chip-row.ts b/src/material/chips/chip-row.ts index 4ea7a39a6884..72a25b004619 100644 --- a/src/material/chips/chip-row.ts +++ b/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); } diff --git a/tools/public_api_guard/material/chips.md b/tools/public_api_guard/material/chips.md index 83cee41db08b..bc80fd7e2d47 100644 --- a/tools/public_api_guard/material/chips.md +++ b/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; // (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; // (undocumented)