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

https://stackoverflow.com/questions/46772852/disable-click-outside-of-angular-material-dialog-area-to-close-the-dialog-with — dota2pro, May 02 '19 at 21:05

score 0 · Answer 1 · answered May 02 '19 at 22:08

0

Use disableRipple input property of mat-select

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

answered May 02 '19 at 22:08

Prasanth

507
2
10

Hi , I am using disableRipple on mat-select but it didn't worked. – NoobCoder Mar 10 '20 at 11:21

score 0 · Accepted Answer · answered May 02 '19 at 23:22

0

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
}

answered May 02 '19 at 23:22

Kode_12

4,506
11
47
97

This didn't worked for me. Still I have to click outside once then button. – NoobCoder Mar 10 '20 at 08:29

How to disable blur on angular material dropdown

2 Answers2