mat-autocomplete panel opening on form load in Angular

Question

The first autocomplete control's selection panel is opened when I open modal dialog and I am trying to close the panel as shown below:

html:

<mat-form-field>
  <input
    #autoCompleteInput
    matInput
    type="text"
    [matAutocomplete]="auto"
  >
  <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption="true" [displayWith]="displayFn">
    <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
      {{option.name}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

ts:

//@ViewChild('autoCompleteInput', { read: MatAutocompleteTrigger }) autoComplete: MatAutocompleteTrigger; 
// I also tried this
@ViewChild(MatAutocompleteTrigger) autoCompleteInput: MatAutocompleteTrigger;

ngAfterViewInit() {
  debugger;
  this.autoCompleteInput.closePanel();
}

But unfortunately the first autocomplete's panel is opened on dialog load. How can I prevent the panel opened or if it is not possible, close the panel?

Answer 1

just give autoFocus:false

this.dialog.open(yourcomponent,{ autoFocus:false });