Skip to content

Commit 8630e2b

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 8daaf4d commit 8630e2b

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
@@ -513,6 +513,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnChanges,
513513
const wasOpen = this.panelOpen;
514514
this._resetActiveItem();
515515
this.autocomplete._setVisibility();
516+
this._changeDetectorRef.detectChanges();
516517

517518
if (this.panelOpen) {
518519
this._overlayRef!.updatePosition();

src/material/autocomplete/autocomplete.spec.ts

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

1790+
it('should be able to preselect the first option when the floating label is disabled',
1791+
fakeAsync(() => {
1792+
fixture.componentInstance.floatLabel = 'never';
1793+
fixture.componentInstance.trigger.autocomplete.autoActiveFirstOption = true;
1794+
fixture.detectChanges();
1795+
1796+
fixture.componentInstance.trigger.openPanel();
1797+
fixture.detectChanges();
1798+
zone.simulateZoneExit();
1799+
// Note: should not have a detectChanges call here
1800+
// in order for the test to fail when it's supposed to.
1801+
1802+
expect(overlayContainerElement.querySelectorAll('mat-option')[0].classList)
1803+
.toContain('mat-active', 'Expected first option to be highlighted.');
1804+
}));
1805+
17901806
it('should be able to configure preselecting the first option globally', fakeAsync(() => {
17911807
overlayContainer.ngOnDestroy();
17921808
fixture.destroy();

0 commit comments

Comments
 (0)