From b4b76bd3db8767a3dd1e52e7dce807d9f6f04be9 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 1 Mar 2018 01:21:54 +0100 Subject: [PATCH] fix(expansion-panel): entire body content being shown on animation start (#10138) Fixes expansion panels becoming `overflow: visible` as soon as their expansion animation starts, causing them to show the entire content before they're done animating. It seems like we were setting the `mat-expanded` class both through the view and manually when the animation is done. Fixes #10134. --- src/lib/expansion/expansion-panel.html | 1 - src/lib/expansion/expansion.spec.ts | 18 ++++++++++++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/lib/expansion/expansion-panel.html b/src/lib/expansion/expansion-panel.html index 7b1f7ccdc645..0b21a52ab126 100644 --- a/src/lib/expansion/expansion-panel.html +++ b/src/lib/expansion/expansion-panel.html @@ -4,7 +4,6 @@ [@bodyExpansion]="_getExpandedState()" (@bodyExpansion.done)="_bodyAnimation($event)" (@bodyExpansion.start)="_bodyAnimation($event)" - [class.mat-expanded]="expanded" [attr.aria-labelledby]="_headerId" [id]="id" #body> diff --git a/src/lib/expansion/expansion.spec.ts b/src/lib/expansion/expansion.spec.ts index f2017beaf9e9..914dd95a2a8f 100644 --- a/src/lib/expansion/expansion.spec.ts +++ b/src/lib/expansion/expansion.spec.ts @@ -246,6 +246,24 @@ describe('MatExpansionPanel', () => { expect(fixture.componentInstance.expanded).toBe(false); }); + it('should not set the mat-expanded class until the open animation is done', fakeAsync(() => { + const fixture = TestBed.createComponent(PanelWithContent); + const contentEl = fixture.nativeElement.querySelector('.mat-expansion-panel-content'); + + fixture.detectChanges(); + expect(contentEl.classList).not.toContain('mat-expanded', + 'Expected class not to be there on init'); + + fixture.componentInstance.expanded = true; + fixture.detectChanges(); + expect(contentEl.classList).not.toContain('mat-expanded', + 'Expected class not to be added immediately after becoming expanded'); + + flush(); + expect(contentEl.classList).toContain('mat-expanded', + 'Expected class to be added after the animation has finished'); + })); + describe('disabled state', () => { let fixture: ComponentFixture; let panel: HTMLElement;