How to set a default mat-option value on hover when a mat-autocomplete-panel is opened?

Question

In Angular 14, I'm using the mat-autocomplete component from Material.

When an option has been selected, if the user click on the autocomplete input again, the drop-down list of all available options shows up again but the selected option is not on hover. Instead, the focus is back on the first entry of the list.

How can we force a specific mat-option to be on focus when the drop-down appears?

<mat-form-field>
  <input
    matInput
    type="text"
    [formControl]="this.formControl"
    [matAutocomplete]="autoComplete"
    [value]="this.value"
    (blur)="this.resetInput(this.value)"  // Set previous selected value back in input if user click away
    (focus)="this.emptyInput()"  // Clear the input if the user focuses it
  >

  <mat-autocomplete
    #autoComplete="matAutocomplete"
    [displayWith]="this.displayWithFn"
    (optionSelected)="this.doSomething($event)"
  >
    <mat-option
      *ngFor="let oneOption of options$ | async"
      [value]="oneOption"
    >
      {{ oneOption.title }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

Answer 1

Nevermind, I have found my answer on: Focus a specific mat-option item when mat-select dialog is opened?

I was expecting Material to have a built-in method in mat-option for this, but apparently, it has to be done in vanilla.