CSS mat-select cant feel the button

Question

When I click on it, the button not work until I click somewhere. How can I give the button a privilege, that mouse can feel it when opened the 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> 

Here the button is active when I hold my mouse cursor over it

In this situation, I cant click the button, until I don't close the mat-select

Here the link where you can test it

Answer 1

This is opinionated solution by material design. You cannot change this behavior.

You can use <select> with matNativeControl which preserves the native browser behavior in which you can interact with the page on the first click.

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