fix(material/autocomplete): add support for initial value in form control

src/material/autocomplete/autocomplete-trigger.ts

@@ -206,6 +206,9 @@ export class MatAutocompleteTrigger
     this._canOpenOnNextFocus = this.panelOpen || !this._hasFocus();
   };
 
+  /** Value of the autocomplete control. */
+  private _value: any;
+
   /** `View -> model callback called when value changes` */
   _onChange: (value: any) => void = () => {};
 
@@ -252,6 +255,15 @@ export class MatAutocompleteTrigger
   ngAfterViewInit() {
     this._initialized.next();
     this._initialized.complete();
+    if (this._value) {
+      const selectedOption = this.autocomplete?.options?.find(
+        o => this._getDisplayValue(o.value) === this._getDisplayValue(this._value),
+      );
+      if (selectedOption && !selectedOption.selected) {
+        selectedOption.select(false);
+        this._changeDetectorRef.detectChanges();
+      }
+    }
     this._cleanupWindowBlur = this._renderer.listen('window', 'blur', this._windowBlurHandler);
   }
 
@@ -434,6 +446,7 @@ export class MatAutocompleteTrigger
 
   // Implemented as part of ControlValueAccessor.
   writeValue(value: any): void {
+    this._value = value;
     Promise.resolve(null).then(() => this._assignOptionValue(value));
   }
 

src/material/autocomplete/autocomplete.spec.ts

@@ -1614,6 +1614,36 @@ describe('MatAutocomplete', () => {
     });
   });
 
+  describe('form control with initial value', () => {
+    let fixture: ComponentFixture<FormControlWithInitialValue>;
+    let input: HTMLInputElement;
+
+    beforeEach(waitForAsync(async () => {
+      fixture = createComponent(FormControlWithInitialValue);
+      fixture.detectChanges();
+
+      input = fixture.debugElement.query(By.css('input'))!.nativeElement;
+
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+      await new Promise(r => setTimeout(r));
+    }));
+
+    it('should mark the initial value as selected if its present', fakeAsync(() => {
+      const trigger = fixture.componentInstance.trigger;
+      trigger.openPanel();
+      fixture.detectChanges();
+
+      const options = overlayContainerElement.querySelectorAll(
+        'mat-option',
+      ) as NodeListOf<HTMLElement>;
+
+      expect(input.value).toBe('Three');
+      expect(options.length).toBe(3);
+      expect(options[2].classList).toContain('mdc-list-item--selected');
+    }));
+  });
+
   describe('option groups', () => {
     let DOWN_ARROW_EVENT: KeyboardEvent;
     let UP_ARROW_EVENT: KeyboardEvent;
@@ -4414,6 +4444,37 @@ class PlainAutocompleteInputWithFormControl {
   formControl = new FormControl('');
 }
 
+@Component({
+  template: `
+<mat-form-field>
+      <input matInput placeholder="Choose" [matAutocomplete]="auto" [formControl]="optionCtrl">
+    </mat-form-field>
+    <mat-autocomplete #auto="matAutocomplete" >
+      @for (option of options; track option) {
+  <mat-option [value]="option">
+         {{option}}
+      </mat-option>
+}
+    </mat-autocomplete>
+  `,
+  imports: [
+    MatAutocomplete,
+    MatAutocompleteTrigger,
+    MatOption,
+    MatInputModule,
+    ReactiveFormsModule,
+  ],
+})
+class FormControlWithInitialValue {
+  optionCtrl = new FormControl('Three');
+  filteredOptions: Observable<any>;
+  options = ['One', 'Two', 'Three'];
+
+  @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;
+
+  constructor() {}
+}
+
 @Component({
   template: `
     <mat-form-field>