delay 1 more macrotask

angular · May 1, 2024 · 6afa61f · 6afa61f
1 parent a4e15fa
commit 6afa61f
Showing 1 changed file with 16 additions and 12 deletions.
diff --git a/src/cdk/dialog/dialog-container.ts b/src/cdk/dialog/dialog-container.ts
@@ -270,21 +270,25 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig>
         break;
       case true:
       case 'first-tabbable':
-        let timeoutRef: {};
         // TODO(mmalerba): Once hybrid mode is enabled in g3, we can change this to just
-        //  `afterNextRender`.
+        //  `afterNextRender(() => setTimeout(() =>`.
         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();
-          }
-        });
+          setTimeout(r);
+        }).then(() =>
+          this._ngZone.runOutsideAngular(() =>
+            // Wait for one more setTimeout in case there are subsequent microtask change detection
+            // cycles (e.g. from ngModel).
+            setTimeout(() => {
+              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"]');