I am working with a mat-select component that has custom options including an additional menu item "Set as default":
<mat-form-field appearance="fill">
<mat-label>Favorite food</mat-label>
<mat-select>
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>
<span>Set as default</span>
</button>
</mat-menu>
</mat-option>
</mat-select>
</mat-form-field>
However, I am facing an issue where when I open the menu, the select option list disappears and only the "Set as default" pop-up is visible.
Is there a way in Angular Material to display "Set as default" on top of the select option list or is it not possible?
Here is the link to Stackblitz for reference: https://stackblitz.com/edit/angular-material-playground-hcw1wo?file=src/app/app.component.html