fix(autocomplete): panelClosingActions emitting twice in some cases (#8998)

Author: crisbeto

src/lib/autocomplete/autocomplete-trigger.ts

@@ -167,16 +167,16 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
 
   /** Closes the autocomplete suggestion panel. */
   closePanel(): void {
-    if (this._overlayRef && this._overlayRef.hasAttached()) {
-      this._overlayRef.detach();
-      this._closingActionsSubscription.unsubscribe();
-    }
-
     this._resetLabel();
 
     if (this._panelOpen) {
       this.autocomplete._isOpen = this._panelOpen = false;
 
+      if (this._overlayRef && this._overlayRef.hasAttached()) {
+        this._overlayRef.detach();
+        this._closingActionsSubscription.unsubscribe();
+      }
+
       // We need to trigger change detection manually, because
       // `fromEvent` doesn't seem to do it at the proper time.
       // This ensures that the label is reset when the
@@ -195,7 +195,9 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
       this.autocomplete._keyManager.tabOut.pipe(filter(() => this._panelOpen)),
       this._escapeEventStream,
       this._outsideClickStream,
-      this._overlayRef ? this._overlayRef.detachments() : observableOf()
+      this._overlayRef ?
+          this._overlayRef.detachments().pipe(filter(() => this._panelOpen)) :
+          observableOf()
     );
   }
 

src/lib/autocomplete/autocomplete.spec.ts

@@ -1520,27 +1520,26 @@ describe('MatAutocomplete', () => {
     }));
 
 
-    it('should reset correctly when closed programmatically', async(() => {
+    it('should reset correctly when closed programmatically', fakeAsync(() => {
       TestBed.overrideProvider(MAT_AUTOCOMPLETE_SCROLL_STRATEGY, {
         useFactory: (overlay: Overlay) => () => overlay.scrollStrategies.close(),
         deps: [Overlay]
       });
 
-      const fixture = TestBed.createComponent(SimpleAutocomplete);
+      const fixture = createComponent(SimpleAutocomplete);
       fixture.detectChanges();
       const trigger = fixture.componentInstance.trigger;
 
       trigger.openPanel();
       fixture.detectChanges();
+      zone.simulateZoneExit();
 
-      fixture.whenStable().then(() => {
-        expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
+      expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
 
-        scrolledSubject.next();
-        fixture.detectChanges();
+      scrolledSubject.next();
+      fixture.detectChanges();
 
-        expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.');
-      });
+      expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.');
     }));
 
   });