CODEWITHSUNDEEP
angular-material
eddyuk
eddyuk

Reputation: 4190

Select in the menu

I would like to create a mat-select controls in mat-menu. In the documentation I don't see any examples with that scenario. I tried it out, and it seems to be working, the problem is when options are expanded, the menu disposes. How can I keep it open? Here is the tester I am working with

Upvotes: 1

Views: 899

Answers (1)

DaggeJ
DaggeJ

Reputation: 2191

You need to stop event propagation ($event.stopPropagation()) on the menu item. Here's an example of how this can be done;

<div mat-menu-item [disableRipple]="true" (click)="$event.stopPropagation()">
    <mat-form-field>
        <mat-label>Some label</mat-label>
        <mat-select [formControl]="someFormControl">
            <mat-option *ngFor="let item of someList" [value]="item.value">{{item.description}}</mat-option>
        </mat-select>
        <button type="button" mat-button matSuffix mat-icon-button (click)="someFormControl.setValue(null); $event.stopPropagation();" title="Clear">
            <mat-icon>close</mat-icon>
        </button>
    </mat-form-field>
</div>

Also you probably want to disable ripple ([disableRipple]="true") so you do not get the ripple visual feedback that menu items normally have.

Upvotes: 1

Related Questions