Skip to content

Commit 386dc10

Browse files
committed
fix(autocomplete): auto-highlighted first option not display correctly if the floating label is disabled
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.
1 parent 37086fd commit 386dc10

File tree

2 files changed

+17
-0
lines changed

2 files changed

+17
-0
lines changed

src/material/autocomplete/autocomplete-trigger.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -531,6 +531,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn
531531
const wasOpen = this.panelOpen;
532532
this._resetActiveItem();
533533
this.autocomplete._setVisibility();
534+
this._changeDetectorRef.detectChanges();
534535

535536
if (this.panelOpen) {
536537
this._overlayRef!.updatePosition();

src/material/autocomplete/autocomplete.spec.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1841,6 +1841,22 @@ describe('MatAutocomplete', () => {
18411841
.toBe(false, 'Expected no active descendant when closed.');
18421842
}));
18431843

1844+
it('should be able to preselect the first option when the floating label is disabled',
1845+
fakeAsync(() => {
1846+
fixture.componentInstance.floatLabel = 'never';
1847+
fixture.componentInstance.trigger.autocomplete.autoActiveFirstOption = true;
1848+
fixture.detectChanges();
1849+
1850+
fixture.componentInstance.trigger.openPanel();
1851+
fixture.detectChanges();
1852+
zone.simulateZoneExit();
1853+
// Note: should not have a detectChanges call here
1854+
// in order for the test to fail when it's supposed to.
1855+
1856+
expect(overlayContainerElement.querySelectorAll('mat-option')[0].classList)
1857+
.toContain('mat-active', 'Expected first option to be highlighted.');
1858+
}));
1859+
18441860
it('should be able to configure preselecting the first option globally', fakeAsync(() => {
18451861
overlayContainer.ngOnDestroy();
18461862
fixture.destroy();

0 commit comments

Comments
 (0)