fix(dialog): not closing correctly when detached externally (#11516)

Author: crisbeto

src/lib/dialog/dialog-ref.ts

@@ -68,13 +68,16 @@ export class MatDialogRef<T, R = any> {
     _containerInstance._animationStateChanged.pipe(
       filter(event => event.phaseName === 'done' && event.toState === 'exit'),
       take(1)
-    )
-    .subscribe(() => {
-      this._overlayRef.dispose();
+    ).subscribe(() => this._overlayRef.dispose());
+
+    _overlayRef.detachments().subscribe(() => {
+      this._beforeClose.next(this._result);
+      this._beforeClose.complete();
       this._locationChanges.unsubscribe();
       this._afterClosed.next(this._result);
       this._afterClosed.complete();
       this.componentInstance = null!;
+      this._overlayRef.dispose();
     });
 
     _overlayRef.keydownEvents()

src/lib/dialog/dialog.spec.ts

@@ -24,7 +24,7 @@ import {Location} from '@angular/common';
 import {SpyLocation} from '@angular/common/testing';
 import {Directionality} from '@angular/cdk/bidi';
 import {MatDialogContainer} from './dialog-container';
-import {OverlayContainer, ScrollStrategy} from '@angular/cdk/overlay';
+import {OverlayContainer, ScrollStrategy, ScrollDispatcher, Overlay} from '@angular/cdk/overlay';
 import {A, ESCAPE} from '@angular/cdk/keycodes';
 import {dispatchKeyboardEvent} from '@angular/cdk/testing';
 import {
@@ -34,12 +34,14 @@ import {
   MatDialogRef,
   MAT_DIALOG_DEFAULT_OPTIONS
 } from './index';
+import {Subject} from 'rxjs';
 
 
 describe('MatDialog', () => {
   let dialog: MatDialog;
   let overlayContainer: OverlayContainer;
   let overlayContainerElement: HTMLElement;
+  let scrolledSubject = new Subject();
 
   let testViewContainerRef: ViewContainerRef;
   let viewContainerFixture: ComponentFixture<ComponentWithChildViewContainer>;
@@ -49,7 +51,10 @@ describe('MatDialog', () => {
     TestBed.configureTestingModule({
       imports: [MatDialogModule, DialogTestModule],
       providers: [
-        {provide: Location, useClass: SpyLocation}
+        {provide: Location, useClass: SpyLocation},
+        {provide: ScrollDispatcher, useFactory: () => ({
+          scrolled: () => scrolledSubject.asObservable()
+        })},
       ],
     });
 
@@ -188,6 +193,26 @@ describe('MatDialog', () => {
     expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeNull();
   }));
 
+  it('should dispatch the beforeClose and afterClose events when the ' +
+    'overlay is detached externally', fakeAsync(inject([Overlay], (overlay: Overlay) => {
+      const dialogRef = dialog.open(PizzaMsg, {
+        viewContainerRef: testViewContainerRef,
+        scrollStrategy: overlay.scrollStrategies.close()
+      });
+      const beforeCloseCallback = jasmine.createSpy('beforeClosed callback');
+      const afterCloseCallback = jasmine.createSpy('afterClosed callback');
+
+      dialogRef.beforeClose().subscribe(beforeCloseCallback);
+      dialogRef.afterClosed().subscribe(afterCloseCallback);
+
+      scrolledSubject.next();
+      viewContainerFixture.detectChanges();
+      flush();
+
+      expect(beforeCloseCallback).toHaveBeenCalledTimes(1);
+      expect(afterCloseCallback).toHaveBeenCalledTimes(1);
+    })));
+
   it('should close a dialog and get back a result before it is closed', fakeAsync(() => {
     const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});