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

Disables focus traps on the server, because they insert DOM nodes that can throw off hydration.
angular · Dec 28, 2023 · 10fbe36 · 10fbe36
1 parent a8b8e62
commit 10fbe36
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 11 deletions.
diff --git a/src/cdk/a11y/focus-trap/focus-trap.ts b/src/cdk/a11y/focus-trap/focus-trap.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {_getFocusedElementPierceShadowDom} from '@angular/cdk/platform';
+import {Platform, _getFocusedElementPierceShadowDom} from '@angular/cdk/platform';
 import {DOCUMENT} from '@angular/common';
 import {
   AfterContentInit,
@@ -21,6 +21,7 @@ import {
   SimpleChanges,
   OnChanges,
   booleanAttribute,
+  inject,
 } from '@angular/core';
 import {take} from 'rxjs/operators';
 import {InteractivityChecker} from '../interactivity-checker/interactivity-checker';
@@ -416,10 +417,12 @@ export class CdkTrapFocus implements OnDestroy, AfterContentInit, OnChanges, DoC
   /** Whether the focus trap is active. */
   @Input({alias: 'cdkTrapFocus', transform: booleanAttribute})
   get enabled(): boolean {
-    return this.focusTrap.enabled;
+    return this.focusTrap?.enabled || false;
   }
   set enabled(value: boolean) {
-    this.focusTrap.enabled = value;
+    if (this.focusTrap) {
+      this.focusTrap.enabled = value;
+    }
   }
 
   /**
@@ -437,11 +440,15 @@ export class CdkTrapFocus implements OnDestroy, AfterContentInit, OnChanges, DoC
      */
     @Inject(DOCUMENT) _document: any,
   ) {
-    this.focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement, true);
+    const platform = inject(Platform);
+
+    if (platform.isBrowser) {
+      this.focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement, true);
+    }
   }
 
   ngOnDestroy() {
-    this.focusTrap.destroy();
+    this.focusTrap?.destroy();
 
     // If we stored a previously focused element when using autoCapture, return focus to that
     // element now that the trapped region is being destroyed.
@@ -452,15 +459,15 @@ export class CdkTrapFocus implements OnDestroy, AfterContentInit, OnChanges, DoC
   }
 
   ngAfterContentInit() {
-    this.focusTrap.attachAnchors();
+    this.focusTrap?.attachAnchors();
 
     if (this.autoCapture) {
       this._captureFocus();
     }
   }
 
   ngDoCheck() {
-    if (!this.focusTrap.hasAttached()) {
+    if (this.focusTrap && !this.focusTrap.hasAttached()) {
       this.focusTrap.attachAnchors();
     }
   }
@@ -472,14 +479,14 @@ export class CdkTrapFocus implements OnDestroy, AfterContentInit, OnChanges, DoC
       autoCaptureChange &&
       !autoCaptureChange.firstChange &&
       this.autoCapture &&
-      this.focusTrap.hasAttached()
+      this.focusTrap?.hasAttached()
     ) {
       this._captureFocus();
     }
   }
 
   private _captureFocus() {
     this._previouslyFocusedElement = _getFocusedElementPierceShadowDom();
-    this.focusTrap.focusInitialElementWhenReady();
+    this.focusTrap?.focusInitialElementWhenReady();
   }
 }
diff --git a/src/universal-app/kitchen-sink/kitchen-sink.html b/src/universal-app/kitchen-sink/kitchen-sink.html
@@ -449,7 +449,7 @@ <h2>Horizontal Stepper</h2>
 
 <h2>Focus trap</h2>
 
-<div cdkTrapFocus cdkTrapFocusAutoCapture>
+<div cdkTrapFocus [cdkTrapFocusAutoCapture]="isAutomated">
   <button>Oh no, I'm trapped!</button>
 </div>
 

diff --git a/src/universal-app/kitchen-sink/kitchen-sink.ts b/src/universal-app/kitchen-sink/kitchen-sink.ts
@@ -1,4 +1,4 @@
-import {FocusMonitor} from '@angular/cdk/a11y';
+import {A11yModule, FocusMonitor} from '@angular/cdk/a11y';
 import {DragDropModule} from '@angular/cdk/drag-drop';
 import {ScrollingModule, ViewportRuler} from '@angular/cdk/scrolling';
 import {CdkTableModule, DataSource} from '@angular/cdk/table';
@@ -122,6 +122,7 @@ export class TestEntryComponent {}
     // CDK Modules
     CdkTableModule,
     DragDropModule,
+    A11yModule,
 
     // Other modules
     YouTubePlayer,