Skip to content

Commit 91d90df

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 4cdf5ba commit 91d90df

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
@@ -1632,6 +1632,22 @@ describe('MatAutocomplete', () => {
16321632
.toContain('mat-active', 'Expected first option to be highlighted.');
16331633
}));
16341634

1635+
it('should be able to preselect the first option when the floating label is disabled',
1636+
fakeAsync(() => {
1637+
fixture.componentInstance.floatLabel = 'never';
1638+
fixture.componentInstance.trigger.autocomplete.autoActiveFirstOption = true;
1639+
fixture.detectChanges();
1640+
1641+
fixture.componentInstance.trigger.openPanel();
1642+
fixture.detectChanges();
1643+
zone.simulateZoneExit();
1644+
// Note: should not have a detectChanges call here
1645+
// in order for the test to fail when it's supposed to.
1646+
1647+
expect(overlayContainerElement.querySelectorAll('mat-option')[0].classList)
1648+
.toContain('mat-active', 'Expected first option to be highlighted.');
1649+
}));
1650+
16351651
it('should be able to configure preselecting the first option globally', fakeAsync(() => {
16361652
overlayContainer.ngOnDestroy();
16371653
fixture.destroy();

0 commit comments

Comments
 (0)