fix(expansion-panel): header animating on init when using non-default height (#16122)

Works around the expansion panel header animating on init, if its header is different from the default one. The original issue comes from the code introduced in #13088, but we can't remove that code, because it's there to work around a bug in Angular.

Fixes #16067.

Author: crisbeto

src/material/expansion/expansion-panel-header.ts

@@ -61,6 +61,8 @@ import {MatAccordionTogglePosition} from './accordion-base';
     '[class.mat-expansion-toggle-indicator-before]': `_getTogglePosition() === 'before'`,
     '(click)': '_toggle()',
     '(keydown)': '_keydown($event)',
+    '[@.disabled]': '_animationsDisabled',
+    '(@expansionHeight.start)': '_animationStarted()',
     '[@expansionHeight]': `{
         value: _getExpandedState(),
         params: {
@@ -73,6 +75,9 @@ import {MatAccordionTogglePosition} from './accordion-base';
 export class MatExpansionPanelHeader implements OnDestroy, FocusableOption {
   private _parentChangeSubscription = Subscription.EMPTY;
 
+  /** Whether Angular animations in the panel header should be disabled. */
+  _animationsDisabled = true;
+
   constructor(
       @Host() public panel: MatExpansionPanel,
       private _element: ElementRef,
@@ -116,6 +121,18 @@ export class MatExpansionPanelHeader implements OnDestroy, FocusableOption {
     }
   }
 
+  _animationStarted() {
+    // Currently the `expansionHeight` animation has a `void => collapsed` transition which is
+    // there to work around a bug in Angular (see #13088), however this introduces a different
+    // issue. The new transition will cause the header to animate in on init (see #16067), if the
+    // consumer has set a header height that is different from the default one. We work around it
+    // by disabling animations on the header and re-enabling them after the first animation has run.
+    // Note that Angular dispatches animation events even if animations are disabled. Ideally this
+    // wouldn't be necessary if we remove the `void => collapsed` transition, but we have to wait
+    // for https://github.com/angular/angular/issues/18847 to be resolved.
+    this._animationsDisabled = false;
+  }
+
   /** Height of the header while the panel is expanded. */
   @Input() expandedHeight: string;
 

tools/public_api_guard/material/expansion.d.ts

@@ -75,11 +75,13 @@ export declare class MatExpansionPanelDescription {
 }
 
 export declare class MatExpansionPanelHeader implements OnDestroy, FocusableOption {
+    _animationsDisabled: boolean;
     collapsedHeight: string;
     readonly disabled: any;
     expandedHeight: string;
     panel: MatExpansionPanel;
     constructor(panel: MatExpansionPanel, _element: ElementRef, _focusMonitor: FocusMonitor, _changeDetectorRef: ChangeDetectorRef, defaultOptions?: MatExpansionPanelDefaultOptions);
+    _animationStarted(): void;
     _getExpandedState(): string;
     _getPanelId(): string;
     _getTogglePosition(): MatAccordionTogglePosition;