fix(material/autocomplete): clear selected option if it is removed wh…

…ile typing

Based on an internal bug report. Clears the selected option in the autocomplete if the user types in something else.

src/material/autocomplete/autocomplete-trigger.ts

@@ -506,6 +506,18 @@ export class MatAutocompleteTrigger
 
       if (!value) {
         this._clearPreviousSelectedOption(null, false);
+      } else if (this.panelOpen && !this.autocomplete.requireSelection) {
+        // Note that we don't reset this when `requireSelection` is enabled,
+        // because the option will be reset when the panel is closed.
+        const selectedOption = this.autocomplete.options?.find(option => option.selected);
+
+        if (selectedOption) {
+          const display = this.autocomplete.displayWith?.(selectedOption) ?? selectedOption.value;
+
+          if (value !== display) {
+            selectedOption.deselect(false);
+          }
+        }
       }
 
       if (this._canOpen() && this._document.activeElement === event.target) {
@@ -640,18 +652,16 @@ export class MatAutocompleteTrigger
         ? this.autocomplete.displayWith(value)
         : value;
 
+    if (value == null) {
+      this._clearPreviousSelectedOption(null, false);
+    }
+
     // Simply falling back to an empty string if the display value is falsy does not work properly.
     // The display value can also be the number zero and shouldn't fall back to an empty string.
     this._updateNativeInputValue(toDisplay != null ? toDisplay : '');
   }
 
   private _updateNativeInputValue(value: string): void {
-    // We want to clear the previous selection if our new value is falsy. e.g: reactive form field
-    // being reset.
-    if (!value) {
-      this._clearPreviousSelectedOption(null, false);
-    }
-
     // If it's used within a `MatFormField`, we should set it through the property so it can go
     // through change detection.
     if (this._formField) {

src/material/autocomplete/autocomplete.spec.ts

@@ -705,6 +705,65 @@ describe('MDC-based MatAutocomplete', () => {
     }).not.toThrow();
   });
 
+  it('should clear the selected option if it no longer matches the input text while typing', fakeAsync(() => {
+    const fixture = createComponent(SimpleAutocomplete);
+    fixture.detectChanges();
+    tick();
+
+    fixture.componentInstance.trigger.openPanel();
+    fixture.detectChanges();
+    zone.simulateZoneExit();
+
+    // Select an option and reopen the panel.
+    (overlayContainerElement.querySelector('mat-option') as HTMLElement).click();
+    fixture.detectChanges();
+    tick();
+    fixture.detectChanges();
+    fixture.componentInstance.trigger.openPanel();
+    fixture.detectChanges();
+    zone.simulateZoneExit();
+
+    expect(fixture.componentInstance.options.first.selected).toBe(true);
+
+    const input = fixture.debugElement.query(By.css('input'))!.nativeElement;
+    input.value = '';
+    typeInElement(input, 'Ala');
+    fixture.detectChanges();
+    tick();
+
+    expect(fixture.componentInstance.options.first.selected).toBe(false);
+  }));
+
+  it('should not clear the selected option if it no longer matches the input text while typing with requireSelection', fakeAsync(() => {
+    const fixture = createComponent(SimpleAutocomplete);
+    fixture.componentInstance.requireSelection = true;
+    fixture.detectChanges();
+    tick();
+
+    fixture.componentInstance.trigger.openPanel();
+    fixture.detectChanges();
+    zone.simulateZoneExit();
+
+    // Select an option and reopen the panel.
+    (overlayContainerElement.querySelector('mat-option') as HTMLElement).click();
+    fixture.detectChanges();
+    tick();
+    fixture.detectChanges();
+    fixture.componentInstance.trigger.openPanel();
+    fixture.detectChanges();
+    zone.simulateZoneExit();
+
+    expect(fixture.componentInstance.options.first.selected).toBe(true);
+
+    const input = fixture.debugElement.query(By.css('input'))!.nativeElement;
+    input.value = '';
+    typeInElement(input, 'Ala');
+    fixture.detectChanges();
+    tick();
+
+    expect(fixture.componentInstance.options.first.selected).toBe(true);
+  }));
+
   describe('forms integration', () => {
     let fixture: ComponentFixture<SimpleAutocomplete>;
     let input: HTMLInputElement;