如何禁用角度材质下拉菜单上的模糊

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

使用mat-select的disableRipple输入属性

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

Answer 2

我发现解决此问题的最佳方法是将所需控件的z-index设置为高于默认的材质背景覆盖（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
}