From d3d34176a6392a19d6caa2f3f32e492c7937e75a Mon Sep 17 00:00:00 2001 From: crisbeto Date: Sun, 3 Dec 2017 00:01:29 +0100 Subject: [PATCH] fix(autocomplete): panelClosingActions emitting when tabbing away from a closed autocomplete Fixes the `MatAutocompleteTrigger.panelClosingActions` emitting when the user tabs away from an autocomplete that was closed already. Fixes #8763. --- src/lib/autocomplete/autocomplete-trigger.ts | 2 +- src/lib/autocomplete/autocomplete.spec.ts | 17 +++++++++++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) 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;