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

167 views Asked by At

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>
0

There are 0 answers