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

Th 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.