Как отключить размытие при раскрытии углового материала

Question

У меня есть форма, которая содержит раскрывающийся список с использованием компонента выбора мата для углового материала.

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

Когда раскрывающийся список открыт, я не могу щелкнуть какие-либо элементы за его пределами (например, кнопку).Сначала нужно щелкнуть за пределами раскрывающегося списка, чтобы закрыть его, чтобы затем иметь возможность взаимодействовать с другим элементом управления.

Есть ли способ отключить эффект размытия этого компонента (чтобы я мог нажать кнопку, когда раскрывающийся список открыт)?

Answer 1

Я нашел лучший способ решить эту проблему - установить z-индекс нужного элемента управления выше, чем фоновое наложение материала по умолчанию (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
}

Answer 2

Использовать свойство input disableRipple для mat-select

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