race ANR / setTimeout

Author: mmalerba

src/cdk/dialog/dialog-container.ts

@@ -270,17 +270,21 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig>
         break;
       case true:
       case 'first-tabbable':
-        afterNextRender(
-          () => {
-            const focusedSuccessfully = this._focusTrap?.focusInitialElement();
-            // If we weren't able to find a focusable element in the dialog, then focus the dialog
-            // container instead.
-            if (!focusedSuccessfully) {
-              this._focusDialogContainer();
-            }
-          },
-          {injector: this._injector},
-        );
+        let timeoutRef: {};
+        // TODO(mmalerba): Once hybrid mode is enabled in g3, we can change this to just
+        //  `afterNextRender`.
+        new Promise<void>(r => {
+          afterNextRender(r, {injector: this._injector});
+          timeoutRef = setTimeout(r);
+        }).then(() => {
+          clearTimeout(timeoutRef as number);
+          const focusedSuccessfully = this._focusTrap?.focusInitialElement();
+          // If we weren't able to find a focusable element in the dialog, then focus the dialog
+          // container instead.
+          if (!focusedSuccessfully) {
+            this._focusDialogContainer();
+          }
+        });
         break;
       case 'first-heading':
         this._focusByCssSelector('h1, h2, h3, h4, h5, h6, [role="heading"]');

src/material/dialog/dialog.spec.ts

@@ -165,7 +165,7 @@ describe('MDC-based MatDialog', () => {
     // callback should not be called before animation is complete
     expect(spy).not.toHaveBeenCalled();
 
-    flushMicrotasks();
+    flush();
     expect(spy).toHaveBeenCalled();
   }));
 
@@ -398,6 +398,7 @@ describe('MDC-based MatDialog', () => {
     dialogRef.keydownEvents().subscribe(spy);
 
     viewContainerFixture.detectChanges();
+    flush();
 
     let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
     let container = overlayContainerElement.querySelector('mat-dialog-container') as HTMLElement;
@@ -483,11 +484,11 @@ describe('MDC-based MatDialog', () => {
 
     tick(500);
     viewContainerFixture.detectChanges();
-    flushMicrotasks();
 
     dialogRef = dialog.open(PizzaMsg, {maxWidth: '100px'});
 
     viewContainerFixture.detectChanges();
+    flush();
 
     overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
 
@@ -761,6 +762,7 @@ describe('MDC-based MatDialog', () => {
     };
 
     dialog.open(PizzaMsg, {scrollStrategy});
+    flush();
     expect(scrollStrategy.enable).toHaveBeenCalled();
   }));
 
@@ -814,6 +816,7 @@ describe('MDC-based MatDialog', () => {
   it('should assign a unique id to each dialog', fakeAsync(() => {
     const one = dialog.open(PizzaMsg);
     const two = dialog.open(PizzaMsg);
+    flush();
 
     expect(one.id).toBeTruthy();
     expect(two.id).toBeTruthy();