CODEWITHSUNDEEP
javascriptangularangular-material
Muirik
Muirik

Reputation: 6289

Preventing md-menu from closing when clicking within opened menu in Angular app

In my Angular app I am using an md-icon as a trigger to open up an md-menu. This works as expected.

Now, within that opened menu I have another two buttons that I want to use to trigger different menu items to display within the original, open drop-menu.

The problem is, right now, whenever I click anywhere within the open menu it causes the menu to close. My question is, how can I keep the md-menu open in this case, so that I can click on an additional button within the open menu to filter the menu options further?

Here is my code:

<button [mdMenuTriggerFor]="menu" md-button class="right-btn md-button">
    <md-icon class="arrow-center-align">arrow_drop_down</md-icon>

    <md-menu #menu="mdMenu">
        <ng-container>

            <div class="left-menu-header">
                <button md-button class="menu-load" (click)="displayStandardStages()">Standard</button>
            </div>
            <div class="right-menu-header">
                <button md-button class="menu-load"(click)="displayExtraStages()">Extra</button>
            </div>

            <ng-container *ngIf="!isOpenStage()">
                <ng-container *ngFor="let stage of openStages">
                    <ng-container *ngIf="selectedService?.stage?.stage !== stage.stage">
                        <button md-menu-item (click)="moveRecord(stage)">
                            <span class="md-menu-text capitalize">{{ stage.stage }}</span>
                        </button>
                    </ng-container>
                </ng-container>
            </ng-container>

        </ng-container>
    </md-menu>
</button>

And this is the section of code containing the buttons within the opened menu:

<div class="left-menu-header">
    <button md-button class="menu-load" (click)="displayStandardStages()">Standard</button>
</div>
<div class="right-menu-header">
    <button md-button class="menu-load" (click)="displayExtraStages()">Extra</button>
</div>

How can I prevent the opened mdMenu from closing when I click on one of these buttons within the opened menu?

Upvotes: 2

Views: 751

Answers (1)

G. Tranter
G. Tranter

Reputation: 17908

You need to stop the click event from propagating back to the menu. You can do that very easily with a click handler:

(click)="$event.stopPropagation()"

The trick is in applying the click handler to the right element - if it's just the buttons that's the problem - apply it there. But if the whole menu is a problem, apply it to a base parent container (DIV). There's a discussion about that here.

Upvotes: 3

Related Questions