[#482] Fix SSR issues when accessing document object

Fixes #482
focus-trap · Sep 27, 2021 · 46468bc · 46468bc
1 parent d5e1c2b
commit 46468bc
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/.changeset/unlucky-frogs-push.md b/.changeset/unlucky-frogs-push.md
@@ -0,0 +1,5 @@
+---
+'focus-trap-react': patch
+---
+
+Fix SSR issues when accessing `document` object (#482)
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -20,6 +20,8 @@ __Please leave this checklist in your PR.__
 - E2E test coverage added/updated.
 - Prop-types added/updated.
 - Typings added/updated.
+- Changes do not break SSR:
+  - Careful to test `typeof document/window !== 'undefined'` before using it in code that gets executed on load.
 - README updated (API changes, instructions, etc.).
 - Changes to dependencies explained.
 - Changeset added (run `yarn changeset` locally to add one, and follow the prompts).

diff --git a/src/focus-trap-react.js b/src/focus-trap-react.js
@@ -87,7 +87,10 @@ class FocusTrap extends React.Component {
 
   /** Update the previously focused element with the currently focused element. */
   updatePreviousElement() {
-    const currentDocument = this.props.focusTrapOptions.document || document;
+    // SSR: careful to check if `document` exists before accessing it as a variable
+    const currentDocument =
+      this.props.focusTrapOptions.document ||
+      (typeof document !== 'undefined' ? document : undefined);
     if (currentDocument) {
       this.previouslyFocusedElement = currentDocument.activeElement;
     }