diff --git a/src/material/autocomplete/autocomplete-trigger.ts b/src/material/autocomplete/autocomplete-trigger.ts index 5818092a79ed..d337c28da5b1 100644 --- a/src/material/autocomplete/autocomplete-trigger.ts +++ b/src/material/autocomplete/autocomplete-trigger.ts @@ -595,12 +595,14 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn * stemmed from the user. */ private _setValueAndClose(event: MatOptionSelectionChange | null): void { - if (event && event.source) { - this._clearPreviousSelectedOption(event.source); - this._setTriggerValue(event.source.value); - this._onChange(event.source.value); + const source = event && event.source; + + if (source) { + this._clearPreviousSelectedOption(source); + this._setTriggerValue(source.value); + this._onChange(source.value); + this.autocomplete._emitSelectEvent(source); this._element.nativeElement.focus(); - this.autocomplete._emitSelectEvent(event.source); } this.closePanel(); diff --git a/src/material/autocomplete/autocomplete.spec.ts b/src/material/autocomplete/autocomplete.spec.ts index c13393f7d6e0..60f5557ac21e 100644 --- a/src/material/autocomplete/autocomplete.spec.ts +++ b/src/material/autocomplete/autocomplete.spec.ts @@ -2468,6 +2468,28 @@ describe('MatAutocomplete', () => { expect(event.option.value).toBe('Washington'); })); + it('should refocus the input after the selection event is emitted', fakeAsync(() => { + const events: string[] = []; + const fixture = createComponent(AutocompleteWithSelectEvent); + fixture.detectChanges(); + const input = fixture.nativeElement.querySelector('input'); + + fixture.componentInstance.trigger.openPanel(); + zone.simulateZoneExit(); + fixture.detectChanges(); + + const options = + overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; + spyOn(input, 'focus').and.callFake(() => events.push('focus')); + fixture.componentInstance.optionSelected.and.callFake(() => events.push('select')); + + options[1].click(); + tick(); + fixture.detectChanges(); + + expect(events).toEqual(['select', 'focus']); + })); + it('should emit an event when a newly-added option is selected', fakeAsync(() => { let fixture = createComponent(AutocompleteWithSelectEvent);