'Opened option list of a mat-select within a mat-dialog is not closing

I am using mat-select within mat-dialog. I open mat-select-options by clicking on it. Now if I try close mat-select-options by clicking anywhere within mat-dialog it not closing.

angular angular-material

Solution 1:^[1]

I fixed this by adding close button in option.

<mat-form-field>
  <mat-select placeholder="Favorite food" #foodSelect>
    <button style="float:right" type="button" mat-icon-button (click)="foodSelect.close()">
      <mat-icon>clear</mat-icon>
    </button>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{ food.viewValue }}
    </mat-option>
  </mat-select>
</mat-form-field>

Solution 2:^[2]

I had a similar issue. Make sure the class cdk-global-overlay-wrapper has the same z-index as cdk-overlay-backdrop and cdk-overlay-connected-position-bounding-box. In my case we set the overlay wrapper's z-index to be 99999 but didn't adjust the other two. Easiest fix is to not mess with materials z-index's :)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Tushar
Solution 2	Travis Peterson

'Opened option list of a mat-select within a mat-dialog is not closing

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]