fix(material-experimental/mdc-dialog): implement delayFocusTrap option (#24727)

When I added the `delayFocusTrap` option in #24121, I assumed that it would be inherited into the MDC dialog. Since it looks like that's not actually the case, these changes implement it.

Author: crisbeto

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

@@ -168,8 +168,7 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
    */
   private _finishDialogOpen = () => {
     this._clearAnimationClasses();
-    this._trapFocus();
-    this._animationStateChanged.emit({state: 'opened', totalTime: this._openAnimationDuration});
+    this._openAnimationDone(this._openAnimationDuration);
   };
 
   /**

src/material/dialog/dialog-container.ts

@@ -117,6 +117,10 @@ export abstract class _MatDialogContainerBase extends BasePortalOutlet {
     if (this._document) {
       this._elementFocusedBeforeDialogWasOpened = _getFocusedElementPierceShadowDom();
     }
+
+    if (!this._config.delayFocusTrap) {
+      this._trapFocus();
+    }
   }
 
   /**
@@ -293,6 +297,18 @@ export abstract class _MatDialogContainerBase extends BasePortalOutlet {
     const activeElement = _getFocusedElementPierceShadowDom();
     return element === activeElement || element.contains(activeElement);
   }
+
+  /**
+   * Callback for when the open dialog animation has finished. Intended to
+   * be called by sub-classes that use different animation implementations.
+   */
+  protected _openAnimationDone(totalTime: number) {
+    if (this._config.delayFocusTrap) {
+      this._trapFocus();
+    }
+
+    this._animationStateChanged.next({state: 'opened', totalTime});
+  }
 }
 
 /**
@@ -330,11 +346,7 @@ export class MatDialogContainer extends _MatDialogContainerBase {
   /** Callback, invoked whenever an animation on the host completes. */
   _onAnimationDone({toState, totalTime}: AnimationEvent) {
     if (toState === 'enter') {
-      if (this._config.delayFocusTrap) {
-        this._trapFocus();
-      }
-
-      this._animationStateChanged.next({state: 'opened', totalTime});
+      this._openAnimationDone(totalTime);
     } else if (toState === 'exit') {
       this._restoreFocus();
       this._animationStateChanged.next({state: 'closed', totalTime});
@@ -359,14 +371,6 @@ export class MatDialogContainer extends _MatDialogContainerBase {
     this._changeDetectorRef.markForCheck();
   }
 
-  override _initializeWithAttachedContent() {
-    super._initializeWithAttachedContent();
-
-    if (!this._config.delayFocusTrap) {
-      this._trapFocus();
-    }
-  }
-
   _getAnimationState() {
     return {
       value: this._state,

tools/public_api_guard/material/dialog.md

@@ -197,8 +197,6 @@ export class MatDialogContainer extends _MatDialogContainerBase {
             exitAnimationDuration: string;
         };
     };
-    // (undocumented)
-    _initializeWithAttachedContent(): void;
     _onAnimationDone({ toState, totalTime }: AnimationEvent_2): void;
     _onAnimationStart({ toState, totalTime }: AnimationEvent_2): void;
     _startExitAnimation(): void;
@@ -231,6 +229,7 @@ export abstract class _MatDialogContainerBase extends BasePortalOutlet {
     protected _focusTrapFactory: FocusTrapFactory;
     _id: string;
     _initializeWithAttachedContent(): void;
+    protected _openAnimationDone(totalTime: number): void;
     _portalOutlet: CdkPortalOutlet;
     _recaptureFocus(): void;
     protected _restoreFocus(): void;