Md-menu closes after clicking md-tab inside

Question

I built an md-menu with an md-tab-group inside, using Angular Material 2. On each md-tab I display a different list. The behavior I'm expecting to see is that the user to be able to switch between tabs and the md-menu to stay opened.

The thing is that the md-menu closing on every click on one of the tabs.

 <img src="/assets/images/ic-notifications.png" [mdMenuTriggerFor]="appMenu"/> 

 <md-menu #appMenu="mdMenu"  [overlapTrigger]="false" yPosition="below" xPosition="before" class="notifications-dropdown">
  <md-tab-group >
   <md-tab label="My profile" id="personal">          
     <div class="row notification-row" *ngFor = "let notification of profile_notifications">
        ...
      </div>
   </md-tab>
   <md-tab label="Favorites " id="favorite-tab" >  
  ...
      </md-tab>
   </md-tab-group>
</md-menu>

How can I prevent the md-menu from closing?

@onetwo12 - One can only assume that, since not all code is shown here. — BogdanC, Aug 24 '17 at 14:25
@Emanuela colta - Can you put your code into a plunker? You have one with imported material [here](https://plnkr.co/edit/o077B6uEiiIgkC0S06dd?p=info) — BogdanC, Aug 24 '17 at 14:27
The first tab is by default opened. As long as I am not clicking anywhere (to the opened tab or the other one), of course the md-menu stays opened. But the issue occurs when I click on one of the tabs. @BogdanC , yes, right now I am putting the code in plunker. But I need to clean it before because not all of the data there is relevant. https://plnkr.co/edit/o077B6uEiiIgkC0S06dd?p=preview — Emanuela Colta, Aug 24 '17 at 14:38

score 3 · Accepted Answer · answered Aug 24 '17 at 14:51

You need to stop the mouse click propagation. You can do it like this:

<md-menu #appMenu="mdMenu" [overlapTrigger]="false" yPosition="below" xPosition="before" class="notifications-dropdown">
    <md-tab-group (click)="stopClickPropagate($event)">
        <md-tab label="My profile" id="personal"></md-tab>
        <md-tab label="Favorites " id="favorite-tab"></md-tab>
    </md-tab-group>
</md-menu>

and in your component.ts file:

stopClickPropagate(event: any){
    event.stopPropagation();
    event.preventDefault();
}

Link to Plunker Demo.

Md-menu closes after clicking md-tab inside

1 Answers1

Linked