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

Currently, when we have some initial value in formcontrol those are not marked as selected, this fix will check the initial value and if its matched, will be marked as selected.

Fixes #29422

Author: mistrykaran91

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,31 @@ 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, ReactiveFormsModule],
+})
+class FormControlWithInitialValue {
+  optionCtrl = new FormControl('Three');
+  filteredOptions: Observable<any>;
+  options = ['One', 'Two', 'Three'];
+
+  @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;
+
+  constructor() {}
+}
+
 @Component({
   template: `
     <mat-form-field>