fix(dialog): backdrop not detaching if container view is destroyed (#20232)

* fix(dialog): backdrop not detaching if container view is destroyed

We recently refactored the Material dialog so that it can be used
as base class for the MDC based dialog. For this, we slightly
changed how animations are announced to the corresponding dialog
ref. This was done because the MDC dialog does not use Angular
animations.

It looks like we slightly regressed in cases where the dialog
container view is destroyed immediately upon dialog close. This
is because we accidentally no longer notify the dialog ref if
the dialog animation state goes from `*` to `void`. Currently we
only handle `*` to `exit` while we should also handle the `void`
state.

This issue has not surfaced in any of our tests, in the dev-app but
one screenshot test inside g3 seems flaky after the dialog refactor.

* fixup! fix(dialog): backdrop not detaching if container view is destroyed

Add same test to MDC dialog

Author: devversion

src/material-experimental/mdc-dialog/dialog.spec.ts

@@ -1476,6 +1476,21 @@ describe('MDC-based MatDialog', () => {
          expect(container.hasAttribute('aria-labelledby')).toBe(false);
        }));
   });
+
+  it('should dispose backdrop if containing dialog view is destroyed', fakeAsync(() => {
+    const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+    viewContainerFixture.detectChanges();
+    flush();
+
+    expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBeDefined();
+
+    dialogRef.close();
+    viewContainerFixture.componentInstance.showChildView = false;
+    viewContainerFixture.detectChanges();
+    flush();
+
+    expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBe(null);
+  }));
 });
 
 describe('MDC-based MatDialog with a parent MatDialog', () => {
@@ -1744,9 +1759,11 @@ class ComponentWithOnPushViewContainer {
 
 @Component({
   selector: 'arbitrary-component',
-  template: `<dir-with-view-container></dir-with-view-container>`,
+  template: `<dir-with-view-container *ngIf="showChildView"></dir-with-view-container>`,
 })
 class ComponentWithChildViewContainer {
+  showChildView = true;
+
   @ViewChild(DirectiveWithViewContainer) childWithViewContainer: DirectiveWithViewContainer;
 
   get childViewContainer() {

src/material/dialog/dialog-container.ts

@@ -280,7 +280,7 @@ export class MatDialogContainer extends _MatDialogContainerBase {
   _onAnimationStart({toState, totalTime}: AnimationEvent) {
     if (toState === 'enter') {
       this._animationStateChanged.next({state: 'opening', totalTime});
-    } else if (toState === 'exit') {
+    } else if (toState === 'exit' || toState === 'void') {
       this._animationStateChanged.next({state: 'closing', totalTime});
     }
   }

src/material/dialog/dialog.spec.ts

@@ -1567,6 +1567,20 @@ describe('MatDialog', () => {
     }));
   });
 
+  it('should dispose backdrop if containing dialog view is destroyed', fakeAsync(() => {
+    const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+    viewContainerFixture.detectChanges();
+    flush();
+
+    expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBeDefined();
+
+    dialogRef.close();
+    viewContainerFixture.componentInstance.showChildView = false;
+    viewContainerFixture.detectChanges();
+    flush();
+
+    expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBe(null);
+  }));
 });
 
 describe('MatDialog with a parent MatDialog', () => {
@@ -1821,9 +1835,11 @@ class ComponentWithOnPushViewContainer {
 
 @Component({
   selector: 'arbitrary-component',
-  template: `<dir-with-view-container></dir-with-view-container>`,
+  template: `<dir-with-view-container *ngIf="showChildView"></dir-with-view-container>`,
 })
 class ComponentWithChildViewContainer {
+  showChildView = true;
+
   @ViewChild(DirectiveWithViewContainer) childWithViewContainer: DirectiveWithViewContainer;
 
   get childViewContainer() {