fix(autocomplete): return consistent output from panelClosingActions

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.

Author: crisbeto

src/lib/autocomplete/autocomplete-trigger.ts

@@ -22,6 +22,7 @@ import {first} from 'rxjs/operators/first';
 import {switchMap} from 'rxjs/operators/switchMap';
 import {tap} from 'rxjs/operators/tap';
 import {delay} from 'rxjs/operators/delay';
+import {map} from 'rxjs/operators/map';
 import {
   ChangeDetectorRef,
   Directive,
@@ -190,12 +191,15 @@ 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,
       this._escapeEventStream,
       this._outsideClickStream
+    ).pipe(
+      // Normalize the output so we return a consistent type.
+      map(event => event instanceof MatOptionSelectionChange ? event : null)
     );
   }
 

src/lib/autocomplete/autocomplete.spec.ts

@@ -21,7 +21,7 @@ import {
 } from '@angular/core';
 import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatOption} from '@angular/material/core';
+import {MatOption, MatOptionSelectionChange} from '@angular/material/core';
 import {MatFormField, MatFormFieldModule} from '@angular/material/form-field';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
@@ -1361,7 +1361,7 @@ describe('MatAutocomplete', () => {
       fixture.whenStable().then(() => {
         expect(closingActionSpy).not.toHaveBeenCalled();
         dispatchFakeEvent(document, 'click');
-        expect(closingActionSpy).toHaveBeenCalled();
+        expect(closingActionSpy).toHaveBeenCalledWith(null);
       });
     }));
 
@@ -1372,7 +1372,7 @@ describe('MatAutocomplete', () => {
       fixture.whenStable().then(() => {
         expect(closingActionSpy).not.toHaveBeenCalled();
         trigger._handleKeydown(tabEvent);
-        expect(closingActionSpy).toHaveBeenCalled();
+        expect(closingActionSpy).toHaveBeenCalledWith(null);
       });
     }));
 
@@ -1382,7 +1382,7 @@ describe('MatAutocomplete', () => {
 
         expect(closingActionSpy).not.toHaveBeenCalled();
         option.click();
-        expect(closingActionSpy).toHaveBeenCalled();
+        expect(closingActionSpy).toHaveBeenCalledWith(jasmine.any(MatOptionSelectionChange));
       });
     }));
 
@@ -1392,7 +1392,7 @@ describe('MatAutocomplete', () => {
       fixture.whenStable().then(() => {
         expect(closingActionSpy).not.toHaveBeenCalled();
         trigger._handleKeydown(escapeEvent);
-        expect(closingActionSpy).toHaveBeenCalled();
+        expect(closingActionSpy).toHaveBeenCalledWith(null);
       });
     }));
   });