fix(autocomplete): don't reset active option if list of options changes

Currently we reset the active option whenever the list of items changes, however this means that the user's selection could be lost while they're interacting, if some items get added to the end of the list out of view (e.g. if the options are fetched via polling).

These changes address the issue by only resetting the active option when the panel is opened.

Fixes #16608.

Author: crisbeto

src/material/autocomplete/autocomplete-trigger.ts

@@ -511,7 +511,6 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnChanges,
             // that were created, and flatten it so our stream only emits closing events...
             switchMap(() => {
               const wasOpen = this.panelOpen;
-              this._resetActiveItem();
               this.autocomplete._setVisibility();
 
               if (this.panelOpen) {
@@ -634,6 +633,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnChanges,
 
     if (overlayRef && !overlayRef.hasAttached()) {
       overlayRef.attach(this._portal);
+      this._resetActiveItem();
       this._closingActionsSubscription = this._subscribeToClosingActions();
     }
 

src/material/autocomplete/autocomplete.spec.ts

@@ -1755,6 +1755,28 @@ describe('MatAutocomplete', () => {
       componentOptions.slice(1).forEach(option => expect(option.deselect).not.toHaveBeenCalled());
     }));
 
+    it('should not reset the active item if the options list changes while open', fakeAsync(() => {
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+      zone.simulateZoneExit();
+      fixture.detectChanges();
+
+      const DOWN_ARROW_EVENT = createKeyboardEvent('keydown', DOWN_ARROW);
+      fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
+      fixture.detectChanges();
+      tick();
+
+      const classList = overlayContainerElement.querySelector('mat-option')!.classList;
+      expect(classList).toContain('mat-active', 'Expected first option to be highlighted.');
+
+      fixture.componentInstance.states.push({code: 'PR', name: 'Puerto Rico'});
+      fixture.detectChanges();
+      tick();
+      fixture.detectChanges();
+
+      expect(classList).toContain('mat-active', 'Expected first option to stay highlighted.');
+    }));
+
     it('should be able to preselect the first option', fakeAsync(() => {
       fixture.componentInstance.trigger.autocomplete.autoActiveFirstOption = true;
       fixture.componentInstance.trigger.openPanel();