Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 4, 2018
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/lib/autocomplete/autocomplete-trigger.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -493,6 +493,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
switchMap(() => {
this._resetActiveItem();
this.autocomplete._setVisibility();
this._changeDetectorRef.detectChanges();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see that it's already set up this way, but I just noticed that it's weird for this switchMap to have side effects. No action necessary here, but something to keep in mind.

Copy link
Contributor

@thomaspink thomaspink Oct 29, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@crisbeto @jelbourn As we only need the detectChanges when firstStable fires (optionChanges does not need it, because it is resulting out of an user action) we could limit it to only the firstStable event. Maybe like so:

return merge(firstStable, optionChanges)
  .pipe(
    // create a new stream of panelClosingActions, replacing any previous streams
    // that were created, and flatten it so our stream only emits closing events...
    switchMap((optionChange) => {
      this._resetActiveItem();
      this.autocomplete._setVisibility();

      if (this.panelOpen) {
        this._overlayRef!.updatePosition();
      }

      // Only detectChanges when firstStable fires
      if (!optionChange) {
        this._changeDetectorRef.detectChanges();
      }

      return this.panelClosingActions;
    }),
    // ...


if (this.panelOpen) {
this._overlayRef!.updatePosition();
Expand Down
16 changes: 16 additions & 0 deletions src/lib/autocomplete/autocomplete.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1632,6 +1632,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();
Expand Down