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

@@ -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<MatOptionSelectionChange> {
+  get panelClosingActions(): Observable<MatOptionSelectionChange|null> {
     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)
     );
   }
 

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,15 +1649,15 @@ 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', () => {
       const escapeEvent = createKeyboardEvent('keydown', ESCAPE);
 
       expect(closingActionSpy).not.toHaveBeenCalled();
       trigger._handleKeydown(escapeEvent);
-      expect(closingActionSpy).toHaveBeenCalled();
+      expect(closingActionSpy).toHaveBeenCalledWith(null);
     });
   });