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>