Cdk DialogRef.afterClosed is called twice

[jpzwarte]

Bug, feature request, or proposal:

const dialogRef = this.dialog.openFromComponent(FooComponent);
dialogRef.afterClosed().subscribe(() => console.log('close'));

The above code logs "close" twice. From debugging i can see that the _onAnimationDone callback in cdk-dialog-container.ts is called twice.

What is the expected behavior?

It should emit an afterClosed once.

What is the current behavior?

Emits afterClosed twice.

What are the steps to reproduce?

https://angular-material2-issue-s2bybt.stackblitz.io

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

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

6.0.*

Is there anything else we should know?

[jpzwarte]

The first time _onAnimationDone is called is for enter => exit. The second for exit => void.

[jpzwarte]

Workaround for now: dialogRef.afterClosed().pipe(take(1)).subscribe(...)

[jpzwarte]

MatDialog does this properly by also taking 1:

    // Dispose overlay when closing animation is complete
    _containerInstance._animationStateChanged.pipe(
      filter(event => event.phaseName === 'done' && event.toState === 'exit'),
      take(1)
    )
    .subscribe(() => {
      this._overlayRef.dispose();
      this._locationChanges.unsubscribe();
      this._afterClosed.next(this._result);
      this._afterClosed.complete();
      this.componentInstance = null!;
    });

[lc-moxi]

Thanks, this patched an issue we were seeing with Microsoft Edge