fix(autocomplete): not emitting opened event if options come in after open

Fixes `mat-autocomplete` not emitting its `opened` event if it is opened without any options and then the options come in at a later point.

Fixes #15573.

Author: crisbeto

src/material/autocomplete/autocomplete-trigger.ts

@@ -510,24 +510,32 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnChanges,
 
     // When the zone is stable initially, and when the option list changes...
     return merge(firstStable, optionChanges)
-      .pipe(
-        // create a new stream of panelClosingActions, replacing any previous streams
-        // that were created, and flatten it so our stream only emits closing events...
-        switchMap(() => {
-          this._resetActiveItem();
-          this.autocomplete._setVisibility();
-
-          if (this.panelOpen) {
-            this._overlayRef!.updatePosition();
-          }
-
-          return this.panelClosingActions;
-        }),
-        // when the first closing event occurs...
-        take(1)
-      )
-      // set the value, close the panel, and complete.
-      .subscribe(event => this._setValueAndClose(event));
+        .pipe(
+            // create a new stream of panelClosingActions, replacing any previous streams
+            // that were created, and flatten it so our stream only emits closing events...
+            switchMap(() => {
+              const wasOpen = this.panelOpen;
+              this._resetActiveItem();
+              this.autocomplete._setVisibility();
+
+              if (this.panelOpen) {
+                this._overlayRef!.updatePosition();
+
+                // If the `panelOpen` state changed, we need to make sure to emit the `opened`
+                // event, because we may not have emitted it when the panel was attached. This
+                // can happen if the users opens the panel and there are no options, but the
+                // options come in slightly later or as a result of the value changing.
+                if (wasOpen !== this.panelOpen) {
+                  this.autocomplete.opened.emit();
+                }
+              }
+
+              return this.panelClosingActions;
+            }),
+            // when the first closing event occurs...
+            take(1))
+        // set the value, close the panel, and complete.
+        .subscribe(event => this._setValueAndClose(event));
   }
 
   /** Destroys the autocomplete suggestion panel. */

src/material/autocomplete/autocomplete.spec.ts

@@ -421,6 +421,25 @@ describe('MatAutocomplete', () => {
       expect(fixture.componentInstance.openedSpy).not.toHaveBeenCalled();
     });
 
+    it('should emit the `opened` event if the options come in after the panel is shown',
+       fakeAsync(() => {
+         fixture.componentInstance.filteredStates = fixture.componentInstance.states = [];
+         fixture.detectChanges();
+
+         fixture.componentInstance.trigger.openPanel();
+         fixture.detectChanges();
+
+         expect(fixture.componentInstance.openedSpy).not.toHaveBeenCalled();
+
+         fixture.componentInstance.filteredStates = fixture.componentInstance.states =
+             [{name: 'California', code: 'CA'}];
+         fixture.detectChanges();
+         tick();
+         fixture.detectChanges();
+
+         expect(fixture.componentInstance.openedSpy).toHaveBeenCalled();
+       }));
+
     it('should not emit the opened event multiple times while typing', fakeAsync(() => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();