How to disable blur on angular material dropdown

Question

I have a form that contains a dropdown using the mat-select component of angular material.

<mat-select multiple (selectionChange)="onFilter($event)">
   <mat-option *ngFor="let section of someDropdown" [value]="section">
      {{section}}
   </mat-option>
</mat-select>
<button class="some-button" (click)="doSomething()>Click Me</button>

When the dropdown is open, I cannot click on any elements outside of it(ie: a button). I first need to click outside of the dropdown to close it, to then be able to interact with a different control.

Is there a way to disable the blur effect of this component (so i can click a button while the dropdown is open)?

Answer 1

Use disableRipple input property of mat-select

https://material.angular.io/components/select/api

Answer 2

I found the best way to address this is to set the z-index of the desired control, higher than the default material backdrop-overlay (z-index: 1000);

<button class="some-button" (click)="doSomething()>Click Me</button>

css:

.some-button {
 z-index: 1001 //set this higher than the overlay backgrop
}