refactor(material/dialog): switch to CDK dialog internally

Switches the Material dialog to be based on the CDK dialog.

Author: crisbeto

src/cdk/dialog/dialog-container.ts

@@ -161,6 +161,14 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig>
     return this._portalOutlet.attachDomPortal(portal);
   };
 
+  // TODO(crisbeto): this shouldn't be exposed, but there are internal references to it.
+  /** Captures focus if it isn't already inside the dialog. */
+  _recaptureFocus() {
+    if (!this._containsFocus()) {
+      this._trapFocus();
+    }
+  }
+
   /**
    * Focuses the provided element. If the element is not focusable, it will add a tabIndex
    * attribute to forcefully focus it. The attribute is removed after focus is moved.
@@ -316,8 +324,8 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig>
     // Clicking on the backdrop will move focus out of dialog.
     // Recapture it if closing via the backdrop is disabled.
     this._overlayRef.backdropClick().subscribe(() => {
-      if (this._config.disableClose && !this._containsFocus()) {
-        this._trapFocus();
+      if (this._config.disableClose) {
+        this._recaptureFocus();
       }
     });
   }

src/material-experimental/mdc-dialog/BUILD.bazel

@@ -64,6 +64,7 @@ ng_test_library(
         ":mdc-dialog",
         "//src/cdk/a11y",
         "//src/cdk/bidi",
+        "//src/cdk/dialog",
         "//src/cdk/keycodes",
         "//src/cdk/overlay",
         "//src/cdk/platform",

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

@@ -7,17 +7,18 @@
  */
 
 import {FocusMonitor, FocusTrapFactory, InteractivityChecker} from '@angular/cdk/a11y';
+import {OverlayRef} from '@angular/cdk/overlay';
 import {DOCUMENT} from '@angular/common';
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   ElementRef,
   Inject,
   OnDestroy,
   Optional,
   ViewEncapsulation,
   NgZone,
+  AfterViewInit,
 } from '@angular/core';
 import {MatDialogConfig, _MatDialogContainerBase} from '@angular/material/dialog';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
@@ -38,16 +39,19 @@ import {cssClasses, numbers} from '@material/dialog';
   host: {
     'class': 'mat-mdc-dialog-container mdc-dialog',
     'tabindex': '-1',
-    'aria-modal': 'true',
-    '[id]': '_id',
+    '[attr.aria-modal]': '_config.ariaModal',
+    '[id]': '_config.id',
     '[attr.role]': '_config.role',
     '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledBy',
     '[attr.aria-label]': '_config.ariaLabel',
     '[attr.aria-describedby]': '_config.ariaDescribedBy || null',
     '[class._mat-animation-noopable]': '!_animationsEnabled',
   },
 })
-export class MatDialogContainer extends _MatDialogContainerBase implements OnDestroy {
+export class MatDialogContainer
+  extends _MatDialogContainerBase
+  implements OnDestroy, AfterViewInit
+{
   /** Whether animations are enabled. */
   _animationsEnabled: boolean = this._animationMode !== 'NoopAnimations';
 
@@ -67,30 +71,31 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
   constructor(
     elementRef: ElementRef,
     focusTrapFactory: FocusTrapFactory,
-    changeDetectorRef: ChangeDetectorRef,
     @Optional() @Inject(DOCUMENT) document: any,
-    config: MatDialogConfig,
+    dialogConfig: MatDialogConfig,
     checker: InteractivityChecker,
     ngZone: NgZone,
+    overlayRef: OverlayRef,
     @Optional() @Inject(ANIMATION_MODULE_TYPE) private _animationMode?: string,
     focusMonitor?: FocusMonitor,
   ) {
     super(
       elementRef,
       focusTrapFactory,
-      changeDetectorRef,
       document,
-      config,
+      dialogConfig,
       checker,
       ngZone,
+      overlayRef,
       focusMonitor,
     );
   }
 
-  override _initializeWithAttachedContent() {
+  override ngAfterViewInit(): void {
     // Delegate to the original dialog-container initialization (i.e. saving the
     // previous element, setting up the focus trap and moving focus to the container).
-    super._initializeWithAttachedContent();
+    super.ngAfterViewInit();
+
     // Note: Usually we would be able to use the MDC dialog foundation here to handle
     // the dialog animation for us, but there are a few reasons why we just leverage
     // their styles and not use the runtime foundation code:
@@ -103,7 +108,9 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
     this._startOpenAnimation();
   }
 
-  ngOnDestroy() {
+  override ngOnDestroy() {
+    super.ngOnDestroy();
+
     if (this._animationTimer !== null) {
       clearTimeout(this._animationTimer);
     }
@@ -177,7 +184,6 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
    */
   private _finishDialogClose = () => {
     this._clearAnimationClasses();
-    this._restoreFocus();
     this._animationStateChanged.emit({state: 'closed', totalTime: this._closeAnimationDuration});
   };
 

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

@@ -6,22 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {OverlayRef} from '@angular/cdk/overlay';
 import {MatDialogRef as NonMdcDialogRef} from '@angular/material/dialog';
-import {MatDialogContainer} from './dialog-container';
-
-// Counter for unique dialog ids.
-let uniqueId = 0;
 
 /**
  * Reference to a dialog opened via the MatDialog service.
  */
-export class MatDialogRef<T, R = any> extends NonMdcDialogRef<T, R> {
-  constructor(
-    overlayRef: OverlayRef,
-    containerInstance: MatDialogContainer,
-    id: string = `mat-mdc-dialog-${uniqueId++}`,
-  ) {
-    super(overlayRef, containerInstance, id);
-  }
-}
+export class MatDialogRef<T, R = any> extends NonMdcDialogRef<T, R> {}

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

@@ -1325,6 +1325,7 @@ describe('MDC-based MatDialog', () => {
 
       tick(500);
       viewContainerFixture.detectChanges();
+      flushMicrotasks();
       expect(lastFocusOrigin!).withContext('Expected the trigger button to be blurred').toBeNull();
 
       dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
@@ -1359,6 +1360,7 @@ describe('MDC-based MatDialog', () => {
 
       tick(500);
       viewContainerFixture.detectChanges();
+      flushMicrotasks();
       expect(lastFocusOrigin!).withContext('Expected the trigger button to be blurred').toBeNull();
 
       const backdrop = overlayContainerElement.querySelector(
@@ -1395,6 +1397,7 @@ describe('MDC-based MatDialog', () => {
 
       tick(500);
       viewContainerFixture.detectChanges();
+      flushMicrotasks();
       expect(lastFocusOrigin!).withContext('Expected the trigger button to be blurred').toBeNull();
 
       const closeButton = overlayContainerElement.querySelector(
@@ -1434,6 +1437,7 @@ describe('MDC-based MatDialog', () => {
 
       tick(500);
       viewContainerFixture.detectChanges();
+      flushMicrotasks();
       expect(lastFocusOrigin!).withContext('Expected the trigger button to be blurred').toBeNull();
 
       const closeButton = overlayContainerElement.querySelector(

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

@@ -8,11 +8,18 @@
 
 import {Overlay, OverlayContainer, ScrollStrategy} from '@angular/cdk/overlay';
 import {Location} from '@angular/common';
-import {Inject, Injectable, InjectionToken, Injector, Optional, SkipSelf} from '@angular/core';
+import {
+  ANIMATION_MODULE_TYPE,
+  Inject,
+  Injectable,
+  InjectionToken,
+  Injector,
+  Optional,
+  SkipSelf,
+} from '@angular/core';
 import {_MatDialogBase, MatDialogConfig} from '@angular/material/dialog';
 import {MatDialogContainer} from './dialog-container';
 import {MatDialogRef} from './dialog-ref';
-import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
 /** Injection token that can be used to access the data that was passed in to a dialog. */
 export const MAT_DIALOG_DATA = new InjectionToken<any>('MatMdcDialogData');
@@ -57,6 +64,10 @@ export class MatDialog extends _MatDialogBase<MatDialogContainer> {
     @Optional() @Inject(MAT_DIALOG_DEFAULT_OPTIONS) defaultOptions: MatDialogConfig,
     @Inject(MAT_DIALOG_SCROLL_STRATEGY) scrollStrategy: any,
     @Optional() @SkipSelf() parentDialog: MatDialog,
+    /**
+     * @deprecated No longer used. To be removed.
+     * @breaking-change 15.0.0
+     */
     overlayContainer: OverlayContainer,
     /**
      * @deprecated No longer used. To be removed.
@@ -78,5 +89,7 @@ export class MatDialog extends _MatDialogBase<MatDialogContainer> {
       MAT_DIALOG_DATA,
       animationMode,
     );
+
+    this._idPrefix = 'mat-mdc-dialog-';
   }
 }

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

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {DialogModule} from '@angular/cdk/dialog';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {PortalModule} from '@angular/cdk/portal';
 import {NgModule} from '@angular/core';
@@ -20,7 +21,7 @@ import {
 } from './dialog-content-directives';
 
 @NgModule({
-  imports: [OverlayModule, PortalModule, MatCommonModule],
+  imports: [DialogModule, OverlayModule, PortalModule, MatCommonModule],
   exports: [
     MatDialogContainer,
     MatDialogClose,

src/material-experimental/mdc-dialog/public-api.ts

@@ -17,7 +17,6 @@ export {
   MatDialogState,
   MatDialogConfig,
   matDialogAnimations,
-  throwMatDialogContentAlreadyAttachedError,
   DialogRole,
   DialogPosition,
   MAT_DIALOG_SCROLL_STRATEGY_FACTORY,

src/material/dialog/BUILD.bazel

@@ -23,6 +23,7 @@ ng_module(
         "//src:dev_mode_types",
         "//src/cdk/a11y",
         "//src/cdk/bidi",
+        "//src/cdk/dialog",
         "//src/cdk/keycodes",
         "//src/cdk/overlay",
         "//src/cdk/platform",

src/material/dialog/dialog-config.ts

@@ -112,10 +112,14 @@ export class MatDialogConfig<D = any> {
   autoFocus?: AutoFocusTarget | string | boolean = 'first-tabbable';
 
   /**
-   * Whether the dialog should restore focus to the
-   * previously-focused element, after it's closed.
+   * Whether the dialog should restore focus to the previously-focused element upon closing.
+   * Has the following behavior based on the type that is passed in:
+   * - `boolean` - when true, will return focus to the element that was focused before the dialog
+   *    was opened, otherwise won't restore focus at all.
+   * - `string` - focus will be restored to the first element that matches the CSS selector.
+   * - `HTMLElement` - focus will be restored to the specific element.
    */
-  restoreFocus?: boolean = true;
+  restoreFocus?: boolean | string | HTMLElement = true;
 
   /** Whether to wait for the opening animation to finish before trapping focus. */
   delayFocusTrap?: boolean = true;