Components: mat-expansion-panel opens all panels in the mat-accordian when used with in mat-menu

Created on 20 Feb 2018 · 5Comments · Source: angular/components

Bug, feature request, or proposal:

Bug: mat-expansion-panel opens all panels in the mat-accordian when used with in mat-menu

What is the expected behavior?

All panels should close by default.

What is the current behavior?

All panels is open by default.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-xw9sqj

Similiar Issue
https://stackoverflow.com/q/48388343/1267073

What is the use-case or motivation for changing an existing behavior?

Use-case- Show a folder structure view

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular - 5.2.5
material - 5.2.1

#### Is there anything else we should know?
-

Source

sajaynambiar

👍4

Most helpful comment

Any suggestions to implement that use case ?

sajaynambiar on 20 Feb 2018

👍5

All 5 comments

Closing as placing a MatAccordion or MatExpansionPanel inside of a mat-menu element is not a supported configuration.

josephperrott on 20 Feb 2018

Any suggestions to implement that use case ?

sajaynambiar on 20 Feb 2018

👍5

@sajaynambiar I would like to see this supported or a way to implement this as well.

jamesguan on 9 May 2018

You can get around this by manually updating the classes-- I think you could fix the animations using a css animation (but haven't worked that part out 100% yet) .

Would be something like this in the .ng.html:
<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;
 }
}