From 28156078f549e79edb1abb71d7383e2e1fc427e2 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 16 May 2018 19:44:04 +0200 Subject: [PATCH] fix(autocomplete): return consistent output from panelClosingActions (#8533) Currently the `panelClosingActions` stream is typed to return a `MatOptionSelectionChange` event, however the real return data is `MatOptionSelectionChange|void|MouseEvent`, which makes it hard to use. These changes switch to emitting a `null` if nothing was selected or `MatOptionSelectionChange` if the user selected something. Fixes #7553. --- src/lib/autocomplete/autocomplete-trigger.ts | 7 +++++-- src/lib/autocomplete/autocomplete.spec.ts | 8 ++++---- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts index 9ca2210b4c1..9df0f0cb6b6 100644 --- a/src/lib/autocomplete/autocomplete-trigger.ts +++ b/src/lib/autocomplete/autocomplete-trigger.ts @@ -18,7 +18,7 @@ import { } from '@angular/cdk/overlay'; import {TemplatePortal} from '@angular/cdk/portal'; import {DOCUMENT} from '@angular/common'; -import {filter, take, switchMap, delay, tap} from 'rxjs/operators'; +import {filter, take, switchMap, delay, tap, map} from 'rxjs/operators'; import { ChangeDetectorRef, Directive, @@ -226,7 +226,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy { * A stream of actions that should close the autocomplete panel, including * when an option is selected, on blur, and when TAB is pressed. */ - get panelClosingActions(): Observable { + get panelClosingActions(): Observable { return merge( this.optionSelections, this.autocomplete._keyManager.tabOut.pipe(filter(() => this._overlayAttached)), @@ -235,6 +235,9 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy { this._overlayRef ? this._overlayRef.detachments().pipe(filter(() => this._overlayAttached)) : observableOf() + ).pipe( + // Normalize the output so we return a consistent type. + map(event => event instanceof MatOptionSelectionChange ? event : null) ); } diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts index c580014d721..e4cd9471753 100644 --- a/src/lib/autocomplete/autocomplete.spec.ts +++ b/src/lib/autocomplete/autocomplete.spec.ts @@ -1615,7 +1615,7 @@ describe('MatAutocomplete', () => { it('should emit panel close event when clicking away', () => { expect(closingActionSpy).not.toHaveBeenCalled(); dispatchFakeEvent(document, 'click'); - expect(closingActionSpy).toHaveBeenCalled(); + expect(closingActionSpy).toHaveBeenCalledWith(null); }); it('should emit panel close event when tabbing out', () => { @@ -1624,7 +1624,7 @@ describe('MatAutocomplete', () => { expect(closingActionSpy).not.toHaveBeenCalled(); trigger._handleKeydown(tabEvent); - expect(closingActionSpy).toHaveBeenCalled(); + expect(closingActionSpy).toHaveBeenCalledWith(null); }); it('should not emit when tabbing away from a closed panel', () => { @@ -1649,7 +1649,7 @@ describe('MatAutocomplete', () => { expect(closingActionSpy).not.toHaveBeenCalled(); option.click(); - expect(closingActionSpy).toHaveBeenCalled(); + expect(closingActionSpy).toHaveBeenCalledWith(jasmine.any(MatOptionSelectionChange)); }); it('should close the panel when pressing escape', () => { @@ -1657,7 +1657,7 @@ describe('MatAutocomplete', () => { expect(closingActionSpy).not.toHaveBeenCalled(); trigger._handleKeydown(escapeEvent); - expect(closingActionSpy).toHaveBeenCalled(); + expect(closingActionSpy).toHaveBeenCalledWith(null); }); });