Angular Material Autocomplete: onfocus keep sugges

Question

I am using Angular Material 7.3.7 and i have a simple autocomplete similiar like in the documentation:

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

Is there any way to keep the suggestion panel closed when the input is getting focused?

I already searched through the API but I found nothing helpfull.

Thanks in advance!

Answer 1

it is a bit hacky solution but you can use closePanel method of MatAutocompleteTrigger as follows

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input #inp="matAutocompleteTrigger"
           (focus)="inputFocused(inp)"
           type="text"
           placeholder="Pick one"
           aria-label="Number"
           matInput [formControl]="myControl"
           [matAutocomplete]="auto"
    />
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

then add following method to your ts file

focused(trg: MatAutocompleteTrigger) {
  setTimeout(() => {
    trg.closePanel();
  });
}

by using settimeout we are waiting for next changedetection cycle so that panel gets open and then we close it. as a result panel gets opened and closed in a couple of miliseconds.

hope it helps :)

=== non hacky solution ====

i checked my autocomplete implementations and in one of them where we have a large number of options we used two option arrays one is allOptions other is filteredOptions. filteredOptions is initially empty and I am showing only filteredOptions in the template. So unless user types something to input nothing gets showed (actually i enforce at least two characters to start filtering because allOptions has a couple thousand of options ).

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text"
           placeholder="Pick one"
           aria-label="Number"
           matInput
           [formControl]="myControl"
           [matAutocomplete]="auto"
    />
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

in my ts file;

allOptions: string[] = this.dataService.userOptions; // there are thousands of options
filteredOptions: string[] = [];

ngOnInit() {
  this.myControl.valueChanges.subscribe(z => {
    if (!z || z.length < 2) {
      this.filteredOptions = [];
    } else {
      this.filteredOptions = this.allOptions.filter(el => el.toLowerCase().indexOf(z.toLowerCase()) >= 0);
    }
}

i hope this helps more :)