fix(autocomplete): auto-highlighted first option not display correctly if the floating label is disabled (#13774)

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.
This commit is contained in:
Kristiyan Kostadinov
2018-12-05 00:38:34 +01:00
committed by mmalerba
parent 904a5eaeca
commit c99c512106
2 changed files with 17 additions and 0 deletions
@@ -493,6 +493,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
switchMap(() => {
this._resetActiveItem();
this.autocomplete._setVisibility();
this._changeDetectorRef.detectChanges();
if (this.panelOpen) {
this._overlayRef!.updatePosition();
+16
View File
@@ -1644,6 +1644,22 @@ describe('MatAutocomplete', () => {
.toContain('mat-active', 'Expected first option to be highlighted.');
}));
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)
.toContain('mat-active', 'Expected first option to be highlighted.');
}));
it('should be able to configure preselecting the first option globally', fakeAsync(() => {
overlayContainer.ngOnDestroy();
fixture.destroy();