fix(cdk/dialog): resolve hydration error in focus trap

Disables focus traps on the server, because they insert DOM nodes that can throw off hydration.

Author: crisbeto

src/cdk/dialog/dialog-container.ts

@@ -14,7 +14,7 @@ import {
   InteractivityChecker,
 } from '@angular/cdk/a11y';
 import {OverlayRef} from '@angular/cdk/overlay';
-import {_getFocusedElementPierceShadowDom} from '@angular/cdk/platform';
+import {Platform, _getFocusedElementPierceShadowDom} from '@angular/cdk/platform';
 import {
   BasePortalOutlet,
   CdkPortalOutlet,
@@ -35,6 +35,7 @@ import {
   Optional,
   ViewChild,
   ViewEncapsulation,
+  inject,
 } from '@angular/core';
 import {DialogConfig} from './dialog-config';
 
@@ -71,13 +72,14 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig>
   extends BasePortalOutlet
   implements OnDestroy
 {
+  private _platform = inject(Platform);
   protected _document: Document;
 
   /** The portal outlet inside of this container into which the dialog content will be loaded. */
   @ViewChild(CdkPortalOutlet, {static: true}) _portalOutlet: CdkPortalOutlet;
 
   /** The class that traps and manages focus within the dialog. */
-  private _focusTrap: FocusTrap;
+  private _focusTrap: FocusTrap | null = null;
 
   /** Element that was focused before the dialog was opened. Save this to restore upon close. */
   private _elementFocusedBeforeDialogWasOpened: HTMLElement | null = null;
@@ -247,7 +249,7 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig>
         break;
       case true:
       case 'first-tabbable':
-        this._focusTrap.focusInitialElementWhenReady().then(focusedSuccessfully => {
+        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) {
@@ -327,12 +329,14 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig>
 
   /** Sets up the focus trap. */
   private _initializeFocusTrap() {
-    this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
+    if (this._platform.isBrowser) {
+      this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
 
-    // Save the previously focused element. This element will be re-focused
-    // when the dialog closes.
-    if (this._document) {
-      this._elementFocusedBeforeDialogWasOpened = _getFocusedElementPierceShadowDom();
+      // Save the previously focused element. This element will be re-focused
+      // when the dialog closes.
+      if (this._document) {
+        this._elementFocusedBeforeDialogWasOpened = _getFocusedElementPierceShadowDom();
+      }
     }
   }