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

Issue

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.

Solution

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>

Answered By - Tushar