fix(material/autocomplete): auto-highlighted first option not display correctly if the floating label is disabled (#14507)

Fixes the first option not appearing as highlighted if the consumer has set `floatLabel="never"` and `autoActiveFirstOption`. It looks like we were depending on the `transitioned` event from the label to kick off the change detection that shows the highlight.

Fixes #13734.

(cherry picked from commit b7ee958)

Author: crisbeto

src/material-experimental/mdc-autocomplete/autocomplete.spec.ts

@@ -2312,6 +2312,22 @@ describe('MDC-based MatAutocomplete', () => {
         .toBe(false);
     }));
 
+    it('should be able to preselect the first option when the floating label is disabled', fakeAsync(() => {
+      fixture.componentInstance.floatLabel = 'never';
+      fixture.componentInstance.trigger.autocomplete.autoActiveFirstOption = true;
+      fixture.detectChanges();
+
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+      zone.simulateZoneExit();
+      // Note: should not have a detectChanges call here
+      // in order for the test to fail when it's supposed to.
+
+      expect(overlayContainerElement.querySelectorAll('mat-option')[0].classList)
+        .withContext('Expected first option to be highlighted.')
+        .toContain('mat-mdc-option-active');
+    }));
+
     it('should be able to configure preselecting the first option globally', fakeAsync(() => {
       fixture.destroy();
       TestBed.resetTestingModule();

src/material/autocomplete/autocomplete-trigger.ts

@@ -509,6 +509,7 @@ export abstract class _MatAutocompleteTriggerBase
             const wasOpen = this.panelOpen;
             this._resetActiveItem();
             this.autocomplete._setVisibility();
+            this._changeDetectorRef.detectChanges();
 
             if (this.panelOpen) {
               this._overlayRef!.updatePosition();

src/material/autocomplete/autocomplete.spec.ts

@@ -2297,6 +2297,22 @@ describe('MatAutocomplete', () => {
         .toBe(false);
     }));
 
+    it('should be able to preselect the first option when the floating label is disabled', fakeAsync(() => {
+      fixture.componentInstance.floatLabel = 'never';
+      fixture.componentInstance.trigger.autocomplete.autoActiveFirstOption = true;
+      fixture.detectChanges();
+
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+      zone.simulateZoneExit();
+      // Note: should not have a detectChanges call here
+      // in order for the test to fail when it's supposed to.
+
+      expect(overlayContainerElement.querySelectorAll('mat-option')[0].classList)
+        .withContext('Expected first option to be highlighted.')
+        .toContain('mat-active');
+    }));
+
     it('should be able to configure preselecting the first option globally', fakeAsync(() => {
       fixture.destroy();
       TestBed.resetTestingModule();