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

…ocus
angular · Mar 4, 2022 · 94d6f88 · 94d6f88
1 parent 69f9c63
commit 94d6f88
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/src/material/dialog/dialog-config.ts b/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;
 

diff --git a/src/material/dialog/dialog-container.ts b/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();
+    }
+  }
 }
diff --git a/src/material/dialog/dialog.spec.ts b/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',

diff --git a/tools/public_api_guard/material/dialog.md b/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;