diff --git a/src/material-experimental/mdc-autocomplete/autocomplete.spec.ts b/src/material-experimental/mdc-autocomplete/autocomplete.spec.ts index fdd8d06cd0a4..621e2d69855e 100644 --- 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 index e7685d53d5a7..b9312e8d2aec 100644 --- 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 index 3e2fc09f30c7..ed41c3acbceb 100644 --- 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();