'Strange behaviour with mat-accordion within a mat-menu

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>
angular-material2


Solution 1:[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

Solution 2:[2]

It`s known issue and it has ugly but working solution. This solution works for me

<mat-expansion-panel #myPanel [class.is-expanded]="myPanel.expanded" [class.is- 
collapsed]="!myPanel.expanded">

and in the css:

.is-expanded { 
  .mat-expansion-panel-content { 
      visibility: inherit !important; //overwrite the element style
      height: inherit !important; //overwrite the element style
  }
}

.is-collapsed {
 .mat-expansion-panel-content {
       overflow: hidden;
      height: 0;
      visibility: hidden;
 }
}

This solution from here https://github.com/angular/material2/issues/10046

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vyacheslav Zhabitsky
Solution 2 Artem Bogdan

Related Questions