WIP: fix tgp

angular · Mar 22, 2024 · 7984b72 · 7984b72
1 parent 440c713
commit 7984b72
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 18 deletions.
diff --git a/src/cdk/dialog/dialog-container.ts b/src/cdk/dialog/dialog-container.ts
@@ -31,14 +31,14 @@ import {
   ElementRef,
   EmbeddedViewRef,
   Inject,
+  Injector,
   NgZone,
   OnDestroy,
   Optional,
   ViewChild,
   ViewEncapsulation,
-  inject,
   afterNextRender,
-  Injector,
+  inject,
 } from '@angular/core';
 import {DialogConfig} from './dialog-config';
 
@@ -272,12 +272,16 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig>
       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();
-            }
+            this._ngZone.run(() =>
+              queueMicrotask(() => {
+                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},
         );

diff --git a/src/material/dialog/dialog.spec.ts b/src/material/dialog/dialog.spec.ts
@@ -18,7 +18,6 @@ import {
   Component,
   ComponentFactoryResolver,
   ComponentRef,
-  createNgModuleRef,
   Directive,
   Inject,
   Injectable,
@@ -29,35 +28,35 @@ import {
   ViewChild,
   ViewContainerRef,
   ViewEncapsulation,
+  createNgModuleRef,
   forwardRef,
   signal,
 } from '@angular/core';
 import {
   ComponentFixture,
+  TestBed,
   fakeAsync,
   flush,
   flushMicrotasks,
   inject,
-  TestBed,
   tick,
-  waitForAsync,
 } from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Subject} from 'rxjs';
+import {CLOSE_ANIMATION_DURATION, OPEN_ANIMATION_DURATION} from './dialog-container';
 import {
-  MatDialog,
-  MatDialogState,
-  MatDialogModule,
-  MatDialogRef,
   MAT_DIALOG_DATA,
   MAT_DIALOG_DEFAULT_OPTIONS,
-  MatDialogContent,
-  MatDialogTitle,
+  MatDialog,
   MatDialogActions,
   MatDialogClose,
+  MatDialogContent,
+  MatDialogModule,
+  MatDialogRef,
+  MatDialogState,
+  MatDialogTitle,
 } from './index';
-import {CLOSE_ANIMATION_DURATION, OPEN_ANIMATION_DURATION} from './dialog-container';
 
 describe('MDC-based MatDialog', () => {
   let dialog: MatDialog;
@@ -968,6 +967,7 @@ describe('MDC-based MatDialog', () => {
       viewContainerFixture.detectChanges();
       flush();
       viewContainerFixture.detectChanges();
+      flush();
 
       let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
       let input = overlayContainerElement.querySelector('input') as HTMLInputElement;
@@ -998,6 +998,7 @@ describe('MDC-based MatDialog', () => {
         viewContainerFixture.detectChanges();
         flush();
         viewContainerFixture.detectChanges();
+        flush();
 
         let backdrop = overlayContainerElement.querySelector(
           '.cdk-overlay-backdrop',
@@ -1184,6 +1185,7 @@ describe('MDC-based MatDialog', () => {
       viewContainerFixture.detectChanges();
       flush();
       viewContainerFixture.detectChanges();
+      flush();
 
       expect(document.activeElement!.tagName)
         .withContext('Expected first tabbable element (input) in the dialog to be focused.')
@@ -1511,6 +1513,7 @@ describe('MDC-based MatDialog', () => {
       viewContainerFixture.detectChanges();
       flush();
       viewContainerFixture.detectChanges();
+      flush();
 
       expect(document.activeElement!.tagName)
         .withContext('Expected dialog container to be focused.')