Angular Material 垫自动完成打开面板

我有带有自动完成字段的模式。
我将 Angular 5 与 Angular Material 2 一起使用。
当模态加载时，第一个字段的面板总是打开的......



如何避免这种情况？

我试图在另一个字段上使用 autofocus 属性，但它不起作用......

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

这个问题是否来自 Material ？

最佳答案

当有选项要显示并且该字段具有焦点时，结果面板将自动打开。默认情况下，对话框会将焦点设置在第一个可聚焦元素上，因此我认为这就是对话框加载时自动完成功能打开的原因。为避免这种情况，请在启动对话框时使用 MatDialogConfig 选项 autoFocus: false。

关于 Angular Material 垫自动完成打开面板，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50099529/