fixup! fix(material/dialog): don't wait for animation before moving focus

Author: crisbeto

src/material/dialog/dialog-config.ts

@@ -110,6 +110,9 @@ export class MatDialogConfig<D = any> {
    */
   restoreFocus?: boolean = true;
 
+  /** Whether to wait for the opening animation to finish before trapping focus. */
+  delayFocusTrap?: boolean = true;
+
   /** Scroll strategy to be used for the dialog. */
   scrollStrategy?: ScrollStrategy;
 

src/material/dialog/dialog-container.ts

@@ -117,8 +117,6 @@ export abstract class _MatDialogContainerBase extends BasePortalOutlet {
     if (this._document) {
       this._elementFocusedBeforeDialogWasOpened = _getFocusedElementPierceShadowDom();
     }
-
-    this._trapFocus();
   }
 
   /**
@@ -327,6 +325,10 @@ export class MatDialogContainer extends _MatDialogContainerBase {
   _onAnimationDone({toState, totalTime}: AnimationEvent) {
     if (toState === 'enter') {
       this._animationStateChanged.next({state: 'opened', totalTime});
+
+      if (this._config.delayFocusTrap) {
+        this._trapFocus();
+      }
     } else if (toState === 'exit') {
       this._restoreFocus();
       this._animationStateChanged.next({state: 'closed', totalTime});
@@ -350,4 +352,12 @@ export class MatDialogContainer extends _MatDialogContainerBase {
     // view container is using OnPush change detection.
     this._changeDetectorRef.markForCheck();
   }
+
+  override _initializeWithAttachedContent() {
+    super._initializeWithAttachedContent();
+
+    if (!this._config.delayFocusTrap) {
+      this._trapFocus();
+    }
+  }
 }

src/material/dialog/dialog.spec.ts

@@ -1388,7 +1388,7 @@ describe('MatDialog', () => {
 
       tick(500);
       viewContainerFixture.detectChanges();
-      expect(lastFocusOrigin).toBe(null);
+      expect(lastFocusOrigin!).toBe('program');
 
       dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
 
@@ -1421,7 +1421,7 @@ describe('MatDialog', () => {
 
       tick(500);
       viewContainerFixture.detectChanges();
-      expect(lastFocusOrigin).toBe(null);
+      expect(lastFocusOrigin!).toBe('program');
 
       const backdrop = overlayContainerElement.querySelector(
         '.cdk-overlay-backdrop',

tools/public_api_guard/material/dialog.md

@@ -165,6 +165,7 @@ export class MatDialogConfig<D = any> {
     closeOnNavigation?: boolean;
     componentFactoryResolver?: ComponentFactoryResolver;
     data?: D | null;
+    delayFocusTrap?: boolean;
     direction?: Direction;
     disableClose?: boolean;
     hasBackdrop?: boolean;
@@ -185,6 +186,8 @@ export class MatDialogConfig<D = any> {
 
 // @public
 export class MatDialogContainer extends _MatDialogContainerBase {
+    // (undocumented)
+    _initializeWithAttachedContent(): void;
     _onAnimationDone({ toState, totalTime }: AnimationEvent_2): void;
     _onAnimationStart({ toState, totalTime }: AnimationEvent_2): void;
     _startExitAnimation(): void;