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.
angular · Feb 28, 2022 · b7ee958 · b7ee958
1 parent 29ac6cf
commit b7ee958
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 0 deletions.
diff --git a/src/material-experimental/mdc-autocomplete/autocomplete.spec.ts b/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();

diff --git a/src/material/autocomplete/autocomplete-trigger.ts b/src/material/autocomplete/autocomplete-trigger.ts
@@ -529,6 +529,7 @@ export abstract class _MatAutocompleteTriggerBase
             const wasOpen = this.panelOpen;
             this._resetActiveItem();
             this.autocomplete._setVisibility();
+            this._changeDetectorRef.detectChanges();
 
             if (this.panelOpen) {
               this._overlayRef!.updatePosition();

diff --git a/src/material/autocomplete/autocomplete.spec.ts b/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();