diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts index 1e328390e6be..31a69af404be 100644 --- a/src/lib/autocomplete/autocomplete-trigger.ts +++ b/src/lib/autocomplete/autocomplete-trigger.ts @@ -193,7 +193,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy { get panelClosingActions(): Observable { return merge( this.optionSelections, - this.autocomplete._keyManager.tabOut, + this.autocomplete._keyManager.tabOut.pipe(filter(() => this._panelOpen)), this._escapeEventStream, this._outsideClickStream ); diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts index b9139a06ce99..4743fcd1f229 100644 --- a/src/lib/autocomplete/autocomplete.spec.ts +++ b/src/lib/autocomplete/autocomplete.spec.ts @@ -1333,6 +1333,23 @@ describe('MatAutocomplete', () => { expect(closingActionSpy).toHaveBeenCalled(); }); + it('should not emit when tabbing away from a closed panel', () => { + const tabEvent = createKeyboardEvent('keydown', TAB); + + input.focus(); + zone.simulateZoneExit(); + + trigger._handleKeydown(tabEvent); + + // Ensure that it emitted once while the panel was open. + expect(closingActionSpy).toHaveBeenCalledTimes(1); + + trigger._handleKeydown(tabEvent); + + // Ensure that it didn't emit again when tabbing out again. + expect(closingActionSpy).toHaveBeenCalledTimes(1); + }); + it('should emit panel close event when selecting an option', () => { const option = overlayContainerElement.querySelector('mat-option') as HTMLElement;