Nested mat-menu closes unexpectedly when opening second menu

I'm using Angular 19 with Angular Material 3 (latest version with MDC-based components) in a project, and I'm running into an issue when working with nested mat-menu elements. What I'm trying to do is

• 
  Open a first mat-menu from a button
  
  
• 
  Inside that menu, there's another item that opens a second mat-menu
  
  
• 
  But when I click on the nested menu trigger, the whole menu closes instead of opening the second one
  

Here is how it is currently implemented:

<!-- Trigger for First Menu -->
<button
[matMenuTriggerFor]="candidatMenu"
class="cursor-pointer"
>
<mat-icon>more_vert</mat-icon>
</button>

<!-- Calendar Menu Trigger -->
<ng-container *ngIf="showCalendar">
<button
mat-icon-button
[matMenuTriggerFor]="menuCal"
aria-label="Add event"
>
<mat-icon>event</mat-icon>
</button>
</ng-container>

<!-- Calendar Mat Menu -->
<mat-menu #menuCal="matMenu">
<button mat-menu-item (click)="doSomething()">
<mat-icon>add</mat-icon>
<span>Option 1</span>
</button>
<button mat-menu-item (click)="doSomethingElse()">
<mat-icon>add</mat-icon>
<span>Option 2</span>
</button>
<button mat-menu-item (click)="anotherAction()">
<mat-icon>add</mat-icon>
<span>Option 3</span>
</button>
</mat-menu>



Is there something I am missing here?

Continue reading...