CSS mat-select 摸不到按键

Question

当我单击它时，该按钮在我单击某处之前不起作用。 我怎样才能给按钮一个特权，当打开 mat-select 时鼠标可以感觉到它

<form>
  <mat-form-field>
    <mat-placeholder>Search reports</mat-placeholder>
      <mat-select #mySelect>
      <mat-option>Cat</mat-option>
      <mat-option>Dog</mat-option>
      <mat-option>Bird</mat-option>
    </mat-select>
      <button mat-buttons matSuffix mat-stroked-button aria-label="add" (click)="mySelect.close(); alert('open a dialog')"> My Button Not Work
    </button>
  </mat-form-field>
</form> 

当我将鼠标 cursor 放在它上面时，按钮处于活动状态

在这种情况下，我无法单击按钮，直到我不关闭 mat-select

在这里你可以测试它的链接

Answer 1

这是材料设计的固执己见的解决方案。 您无法更改此行为。

您可以将<select>与matNativeControl一起使用，它保留了本机浏览器行为，您可以在第一次单击时与页面交互。

  <select matNativeControl required>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>