fix(material/dialog): autofocus should wait for rendering to complete

The current implementation of the dialog's `finishDialogOpen`, which
includes autofocus, only waits for a microtask before executing. This
only works in the tests because of the synchronous call to
`detectChanges` after opening the dialog, ensuring that change detection
runs before the microtask. In an application, this is not guaranteed
because `NgZone` will only run change detection when the microtask queue
empties, which includes the microtask created by the dialog container.

This commit updates the implementation to wait for the next render to
coplete, _then_ queues a microtask that will finish the open process and
perform autofocus.

src/material/dialog/dialog-container.ts

@@ -16,10 +16,13 @@ import {
   ElementRef,
   EventEmitter,
   Inject,
+  Injector,
   NgZone,
   OnDestroy,
   Optional,
   ViewEncapsulation,
+  afterNextRender,
+  inject,
 } from '@angular/core';
 import {MatDialogConfig} from './dialog-config';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
@@ -89,6 +92,7 @@ export class MatDialogContainer extends CdkDialogContainer<MatDialogConfig> impl
     : 0;
   /** Current timer for dialog animations. */
   private _animationTimer: ReturnType<typeof setTimeout> | null = null;
+  private readonly injector = inject(Injector);
 
   constructor(
     elementRef: ElementRef,
@@ -148,10 +152,20 @@ export class MatDialogContainer extends CdkDialogContainer<MatDialogConfig> impl
     } else {
       this._hostElement.classList.add(OPEN_CLASS);
       // Note: We could immediately finish the dialog opening here with noop animations,
-      // but we defer until next tick so that consumers can subscribe to `afterOpened`.
+      // but we defer until after render so that consumers can subscribe to `afterOpened`.
       // Executing this immediately would mean that `afterOpened` emits synchronously
       // on `dialog.open` before the consumer had a change to subscribe to `afterOpened`.
-      Promise.resolve().then(() => this._finishDialogOpen());
+      //
+      // Waiting until afterNextRender is required because we need the dialog content to be
+      // rendered before attempting to set focus.
+      //
+      // We use `queueMicrotask` in `afterNextRender` because at the moment, `afterNextRender`
+      // runs after every ChangeDetectorRef.detectChanges, which would still trigger before a
+      // dialog component gets rendered. Instead, `afterNextRender` needs to run at the end of
+      // `ApplicationRef.tick` (https://github.com/angular/angular/issues/53232).
+      afterNextRender(() => queueMicrotask(() => this._finishDialogOpen()), {
+        injector: this.injector,
+      });
     }
   }
 

src/material/dialog/dialog-content-directives.ts

@@ -15,6 +15,8 @@ import {
   OnInit,
   Optional,
   SimpleChanges,
+  ChangeDetectorRef,
+  inject,
 } from '@angular/core';
 
 import {MatDialog} from './dialog';
@@ -102,6 +104,7 @@ export class MatDialogClose implements OnInit, OnChanges {
 })
 export class MatDialogTitle implements OnInit, OnDestroy {
   @Input() id: string = `mat-mdc-dialog-title-${dialogElementUid++}`;
+  private readonly changeDetectorRef = inject(ChangeDetectorRef);
 
   constructor(
     // The dialog title directive is always used in combination with a `MatDialogRef`.
@@ -136,6 +139,7 @@ export class MatDialogTitle implements OnInit, OnDestroy {
 
         if (index > -1) {
           queue.splice(index, 1);
+          this.changeDetectorRef.markForCheck();
         }
       });
     }

src/material/dialog/dialog.spec.ts

@@ -155,11 +155,11 @@ describe('MDC-based MatDialog', () => {
 
     dialogRef.afterOpened().subscribe(spy);
 
-    viewContainerFixture.detectChanges();
-
     // callback should not be called before animation is complete
     expect(spy).not.toHaveBeenCalled();
 
+    viewContainerFixture.detectChanges();
+
     flushMicrotasks();
     expect(spy).toHaveBeenCalled();
   }));
@@ -1091,13 +1091,23 @@ describe('MDC-based MatDialog', () => {
     'should recapture focus to the first element that matches the css selector when ' +
       'clicking on the backdrop with autoFocus set to a css selector',
     fakeAsync(() => {
-      dialog.open(ContentElementDialog, {
-        disableClose: true,
-        viewContainerRef: testViewContainerRef,
-        autoFocus: 'button',
+      viewContainerFixture.autoDetectChanges();
+      TestBed.inject(NgZone).run(() => {
+        // Queueing a microtask prevents synchronous change detection after zone.run
+        // This test wants to verify that the focus waits for change detection.
+        // Causing a synchronous change detection does not effectively test the
+        // async wait code. This behavior is more similar to what happens in
+        // an application where a dialog is opened after async work or in response
+        // to an interaction.
+        queueMicrotask(() => {
+          dialog.open(ContentElementDialog, {
+            disableClose: true,
+            viewContainerRef: testViewContainerRef,
+            autoFocus: 'button',
+          });
+        });
       });
 
-      viewContainerFixture.detectChanges();
       flushMicrotasks();
 
       let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
@@ -1111,7 +1121,6 @@ describe('MDC-based MatDialog', () => {
 
       firstButton.blur(); // Programmatic clicks might not move focus so we simulate it.
       backdrop.click();
-      viewContainerFixture.detectChanges();
       flush();
 
       expect(document.activeElement)
@@ -2193,6 +2202,7 @@ class PizzaMsg {
       <h1 mat-dialog-title>This is the third title</h1>
     }
     <mat-dialog-content>Lorem ipsum dolor sit amet.</mat-dialog-content>
+    @if (true) {
     <mat-dialog-actions align="end">
       <button mat-dialog-close>Close</button>
       <button class="close-with-true" [mat-dialog-close]="true">Close and return true</button>
@@ -2203,6 +2213,7 @@ class PizzaMsg {
       <div mat-dialog-close>Should not close</div>
       <button class="with-submit" type="submit" mat-dialog-close>Should have submit</button>
     </mat-dialog-actions>
+    }
   `,
   standalone: true,
   imports: [MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose],