Skip to content

mat-expansion-panel animates expanded to closed when nested in a mat-dialog #13936

Closed
@WrongWayJerry

Description

@WrongWayJerry

Bug, feature request, or proposal:

With Angular 7 the mat-expansion-panel when it is in a mat-dialog will "flash" from expanded to closed when the dialog is initially displayed.

What is the expected behavior?

Should behave like Angular 6 and should not show as expanded and then immediately close when a dialog is opened.

What is the current behavior?

When displaying a mat-dialog the expansion panel will display its contents expanded and then immediately close.

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

https://angular-wlrqxn.stackblitz.io

If you cannot open the sample add the following code to the mat-dialog example on the Angular 7 site - stackblitz example:

https://stackblitz.com/angular/koppvkvpmpdn?file=app%2Fdialog-overview-example-dialog.html

<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
  <mat-expansion-panel>
        <mat-expansion-panel-header>
            <mat-panel-title>
                Hello
            </mat-panel-title>
        </mat-expansion-panel-header>
        <mat-card-content>
          <div>World!</div>
          <div>World!</div>
          <div>World!</div>
          <div>World!</div>
          <div>World!</div>
        </mat-card-content>
  </mat-expansion-panel>
</div>

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

The content of the expansion panel should not display if the panel is closed.

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

Angular 7,
Windows
Firefox and Chrome

Is there anything else we should know?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions