fix(material/dialog): Make focus behavior consistent across zoneful/zoneless apps

Author: mmalerba

src/cdk/dialog/dialog-container.ts

@@ -283,13 +283,17 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig>
         break;
       case true:
       case 'first-tabbable':
-        this._focusTrap?.focusInitialElementWhenReady().then(focusedSuccessfully => {
-          // If we weren't able to find a focusable element in the dialog, then focus the dialog
-          // container instead.
-          if (!focusedSuccessfully) {
-            this._focusDialogContainer();
-          }
-        });
+        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},
+        );
         break;
       case 'first-heading':
         afterNextRender(

src/material/bottom-sheet/bottom-sheet.spec.ts

@@ -609,7 +609,8 @@ describe('MatBottomSheet', () => {
       });
 
       viewContainerFixture.detectChanges();
-      flushMicrotasks();
+      flush();
+      viewContainerFixture.detectChanges();
 
       expect(document.activeElement!.tagName)
         .withContext('Expected bottom sheet container to be focused.')
@@ -658,7 +659,8 @@ describe('MatBottomSheet', () => {
         });
 
         viewContainerFixture.detectChanges();
-        flushMicrotasks();
+        flush();
+        viewContainerFixture.detectChanges();
 
         let container = overlayContainerElement.querySelector(
           '.mat-bottom-sheet-container',
@@ -679,7 +681,8 @@ describe('MatBottomSheet', () => {
         });
 
         viewContainerFixture.detectChanges();
-        flushMicrotasks();
+        flush();
+        viewContainerFixture.detectChanges();
 
         let firstHeader = overlayContainerElement.querySelector(
           'h1[tabindex="-1"]',
@@ -701,7 +704,8 @@ describe('MatBottomSheet', () => {
         });
 
         viewContainerFixture.detectChanges();
-        flushMicrotasks();
+        flush();
+        viewContainerFixture.detectChanges();
 
         let firstParagraph = overlayContainerElement.querySelector(
           'p[tabindex="-1"]',
@@ -721,9 +725,9 @@ describe('MatBottomSheet', () => {
 
       const bottomSheetRef = bottomSheet.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
 
-      flushMicrotasks();
       viewContainerFixture.detectChanges();
-      flushMicrotasks();
+      flush();
+      viewContainerFixture.detectChanges();
 
       expect(document.activeElement!.id).not.toBe(
         'bottom-sheet-trigger',
@@ -758,9 +762,9 @@ describe('MatBottomSheet', () => {
         restoreFocus: false,
       });
 
-      flushMicrotasks();
       viewContainerFixture.detectChanges();
-      flushMicrotasks();
+      flush();
+      viewContainerFixture.detectChanges();
 
       expect(document.activeElement!.id).not.toBe(
         'bottom-sheet-trigger',
@@ -798,9 +802,9 @@ describe('MatBottomSheet', () => {
 
       const bottomSheetRef = bottomSheet.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
 
-      flushMicrotasks();
       viewContainerFixture.detectChanges();
-      flushMicrotasks();
+      flush();
+      viewContainerFixture.detectChanges();
 
       expect(document.activeElement!.id).not.toBe(
         'bottom-sheet-trigger',
@@ -815,9 +819,9 @@ describe('MatBottomSheet', () => {
         .withContext('Expected focus to be on the alternate button.')
         .toBe('other-button');
 
-      flushMicrotasks();
       viewContainerFixture.detectChanges();
       flush();
+      viewContainerFixture.detectChanges();
 
       expect(document.activeElement!.id)
         .withContext('Expected focus to stay on the alternate button.')