fix(datepicker): wait for exit animation to finish before detaching content

This is something I ran into while working on aligning the datepicker with the most-recent Material design spec. Since #9639 we use a portal outlet to render the calendar header. The portal outlet directive will detach in `ngOnDestroy` and it won't wait for the parent animation to finish, which ends up shifting the entire calendar up while it's animating away. The only reason that this isn't visible at the moment is because the current animation isn't configured correctly, which causes it to go to `opacity: 0` immediately.

Author: crisbeto

src/lib/datepicker/datepicker.spec.ts

@@ -147,6 +147,29 @@ describe('MatDatepicker', () => {
         testComponent.opened = false;
         fixture.detectChanges();
         flush();
+        fixture.detectChanges();
+        flush();
+        fixture.detectChanges();
+
+        expect(document.querySelector('.mat-datepicker-content')).toBeNull();
+      }));
+
+      it('should wait for the animation to finish before removing the content', fakeAsync(() => {
+        testComponent.datepicker.open();
+        fixture.detectChanges();
+        flush();
+
+        expect(document.querySelector('.mat-datepicker-content')).not.toBeNull();
+
+        testComponent.datepicker.close();
+        fixture.detectChanges();
+        flush();
+
+        expect(document.querySelector('.mat-datepicker-content')).not.toBeNull();
+
+        fixture.detectChanges();
+        flush();
+        fixture.detectChanges();
 
         expect(document.querySelector('.mat-datepicker-content')).toBeNull();
       }));
@@ -190,6 +213,9 @@ describe('MatDatepicker', () => {
         testComponent.datepicker.close();
         fixture.detectChanges();
         flush();
+        fixture.detectChanges();
+        flush();
+        fixture.detectChanges();
 
         expect(parseInt(getComputedStyle(popup).height as string)).toBe(0);
       }));
@@ -1046,9 +1072,13 @@ describe('MatDatepicker', () => {
         testComponent.datepicker.close();
         fixture.detectChanges();
         flush();
+        fixture.detectChanges();
+        flush();
+        fixture.detectChanges();
 
         testComponent.formField.color = 'warn';
         testComponent.datepicker.open();
+        fixture.detectChanges();
 
         contentEl = document.querySelector('.mat-datepicker-content')!;
         fixture.detectChanges();

src/lib/datepicker/datepicker.ts

@@ -22,6 +22,7 @@ import {take, filter} from 'rxjs/operators';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ComponentRef,
   ElementRef,
@@ -30,15 +31,16 @@ import {
   InjectionToken,
   Input,
   NgZone,
+  OnDestroy,
   Optional,
   Output,
   ViewChild,
   ViewContainerRef,
   ViewEncapsulation,
-  OnDestroy,
 } from '@angular/core';
 import {CanColor, DateAdapter, mixinColor, ThemePalette} from '@angular/material/core';
 import {MatDialog, MatDialogRef} from '@angular/material/dialog';
+import {AnimationEvent} from '@angular/animations';
 import {merge, Subject, Subscription} from 'rxjs';
 import {createMissingDateImplError} from './datepicker-errors';
 import {MatDatepickerInput} from './datepicker-input';
@@ -85,7 +87,8 @@ export const _MatDatepickerContentMixinBase = mixinColor(MatDatepickerContentBas
   styleUrls: ['datepicker-content.css'],
   host: {
     'class': 'mat-datepicker-content',
-    '[@transformPanel]': '"enter"',
+    '[@transformPanel]': '_animationState',
+    '(@transformPanel.done)': '_animationDone.next($event)',
     '[class.mat-datepicker-content-touch]': 'datepicker.touchUi',
   },
   animations: [
@@ -98,7 +101,7 @@ export const _MatDatepickerContentMixinBase = mixinColor(MatDatepickerContentBas
   inputs: ['color'],
 })
 export class MatDatepickerContent<D> extends _MatDatepickerContentMixinBase
-  implements AfterViewInit, CanColor {
+  implements AfterViewInit, OnDestroy, CanColor {
 
   /** Reference to the internal calendar component. */
   @ViewChild(MatCalendar) _calendar: MatCalendar<D>;
@@ -109,13 +112,30 @@ export class MatDatepickerContent<D> extends _MatDatepickerContentMixinBase
   /** Whether the datepicker is above or below the input. */
   _isAbove: boolean;
 
-  constructor(elementRef: ElementRef) {
+  /** State of the datepicker's animation. */
+  _animationState: 'enter' | 'void' = 'enter';
+
+  /** Emits whenever an animation on the datepicker completes. */
+  _animationDone = new Subject<AnimationEvent>();
+
+  constructor(elementRef: ElementRef, private _changeDetectorRef: ChangeDetectorRef) {
     super(elementRef);
   }
 
+  /** Starts the datepicker's exiting animation. */
+  _startExitAnimation() {
+    this._animationState = 'void';
+    this._changeDetectorRef.markForCheck();
+    return this._animationDone;
+  }
+
   ngAfterViewInit() {
     this._calendar.focusActiveCell();
   }
+
+  ngOnDestroy() {
+    this._animationDone.complete();
+  }
 }
 
 
@@ -344,7 +364,13 @@ export class MatDatepicker<D> implements OnDestroy, CanColor {
       return;
     }
     if (this._popupRef && this._popupRef.hasAttached()) {
-      this._popupRef.detach();
+      const popupInstance = this._popupComponentRef!.instance;
+
+      // We have to wait for the exit animation to finish before detaching the content, because
+      // we're using a portal outlet to render out the calendar header, which will detach
+      // immediately in `ngOnDestroy` without waiting for the animation, because the animation
+      // is on a parent component, which will cause the calendar to jump up.
+      popupInstance._startExitAnimation().pipe(take(1)).subscribe(() => this._popupRef.detach());
     }
     if (this._dialogRef) {
       this._dialogRef.close();