Strange behaviour with mat-accordion within a mat-menu

Question

I've built a page with a mat-accordion inside of a mat-menu and there's two issues I've been running into. First, when I first open the menu, all the accordions within it are open, even though the aria-expanded is set to false for all of them. After clicking on the accordion, it then properly opens, and clicking it again moves to closed and proper functionality returns. The second issue is that if I place all accordions in closed status and then get out of the menu by clicking elsewhere on the page, and then click on the menu again, while the menu opens up with the accordions closed correctly, but when you go to open one of the accordion's it doesn't open the accordion, giving a strange scrollbar next to it. Again, after clicking the accordion a second time, functionality returns to normal.

Here's my menu and accordion:

<button mat-button [matMenuTriggerFor]="menu" class="right-divide">
  <mat-icon>menu</mat-icon>
</button>
<mat-menu #menu="matMenu">
  <mat-accordion displayMode = "flat">
    <mat-expansion-panel>
      <mat-expansion-panel-header (click)="stopClickPropagate($event)">
        <mat-panel-title>
          PLANNING
        </mat-panel-title>
      </mat-expansion-panel-header>
      <button mat-menu-item>VIEW GOALS</button>
      <button mat-menu-item>EDIT GOALS</button>
      <button mat-menu-item>ADD A NEW GOAL</button>
      <button mat-menu-item>MAKE SCENARIO DECISIONS</button>
      <button mat-menu-item>BUILD OPTIONS</button>
    </mat-expansion-panel>
    <mat-expansion-panel>
      <mat-expansion-panel-header (click)="stopClickPropagate($event)">
        <mat-panel-title>
          BUDGET
        </mat-panel-title>
      </mat-expansion-panel-header>
      <button mat-menu-item>BASE</button>
      <button mat-menu-item>MODIFICATIONS</button>
      <button mat-menu-item>ATTRIBUTES</button>
      <button mat-menu-item>WORKFLOW</button>
    </mat-expansion-panel>
  </mat-accordion>
</mat-menu>

Answer 1

best solution that I found.

<mat-menu #menuRef="matMenuTrigger">
 <ng-template matMenuContent>
   <mat-accordion *ngIf="menuRef.menuOpen">
              ....
  </mat-accordion>
 </ng-template>
</mat-menu>

in case with styles, ng-animate of collapse is broken, bcs height = 0