angular material mat-autocomplete opens panel

Question

I have modal with autocomplete fields. I use Angular 5 with angular material 2. When the modal is loading, the panel of the first field is always open...

How to avoid this ?

I have tried to use autofocus attribute on another field but it doesn't work...

<form name="indexation">
                  <br>
                  <div class="row">
                    <div class="col-md-12">
                      <mat-form-field class="index-full-width">
                        <input
                          matInput
                          type="text"
                          [(ngModel)]="patientChoice"
                          placeholder="Patient"
                          aria-label="Patient"
                          [matAutocomplete]="autoPatient"
                          [formControl]="myControl">
                        <mat-autocomplete (optionSelected)="selectPat()" #autoPatient="matAutocomplete" [displayWith]="displayFnPat">

                          <mat-option *ngFor="let patient of filteredPatients | async" [value]="patient">
                            <span>{{ patient.lastName }}</span>
                            <small>{{patient.firstName}}</small> |
                            <span>né(e) le {{ patient.dateNaissance }}</span> |
                            <small>IPP: {{patient.ipp}}</small>
                          </mat-option>
                        </mat-autocomplete>
                      </mat-form-field>
                    </div>
                  </div>
                  <br>

Is this issue comes from material or not ?

Answer 1

The results panel will automatically open when there are options to be displayed and the field has focus. Dialogs by default will set the focus on the first focusable element, so I assume that this is why your autocomplete opens when the dialog loads. To avoid this, use the MatDialogConfig option autoFocus: false when launching the dialog.