Skip to content

Commit 1474a72

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 9914970 commit 1474a72

File tree

2 files changed

+17
-0
lines changed

2 files changed

+17
-0
lines changed

src/lib/autocomplete/autocomplete-trigger.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -493,6 +493,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
493493
switchMap(() => {
494494
this._resetActiveItem();
495495
this.autocomplete._setVisibility();
496+
this._changeDetectorRef.detectChanges();
496497

497498
if (this.panelOpen) {
498499
this._overlayRef!.updatePosition();

src/lib/autocomplete/autocomplete.spec.ts

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

1670+
it('should be able to preselect the first option when the floating label is disabled',
1671+
fakeAsync(() => {
1672+
fixture.componentInstance.floatLabel = 'never';
1673+
fixture.componentInstance.trigger.autocomplete.autoActiveFirstOption = true;
1674+
fixture.detectChanges();
1675+
1676+
fixture.componentInstance.trigger.openPanel();
1677+
fixture.detectChanges();
1678+
zone.simulateZoneExit();
1679+
// Note: should not have a detectChanges call here
1680+
// in order for the test to fail when it's supposed to.
1681+
1682+
expect(overlayContainerElement.querySelectorAll('mat-option')[0].classList)
1683+
.toContain('mat-active', 'Expected first option to be highlighted.');
1684+
}));
1685+
16701686
it('should be able to configure preselecting the first option globally', fakeAsync(() => {
16711687
overlayContainer.ngOnDestroy();
16721688
fixture.destroy();

0 commit comments

Comments
 (0)