fix(modals): provide ref object for focusvisible

zendeskgarden · Sep 22, 2020 · 94e900a · 94e900a
1 parent 7b776f8
commit 94e900a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 30 deletions.
diff --git a/packages/modals/.size-snapshot.json b/packages/modals/.size-snapshot.json
@@ -1,39 +1,20 @@
 {
-  "dist/index.cjs.js": {
-    "bundled": 25013,
-    "minified": 18007,
-    "gzipped": 4643
-  },
-  "dist/index.esm.js": {
-    "bundled": 24135,
-    "minified": 17194,
-    "gzipped": 4537,
-    "treeshaked": {
-      "rollup": {
-        "code": 14116,
-        "import_statements": 570
-      },
-      "webpack": {
-        "code": 16096
-      }
-    }
-  },
   "index.cjs.js": {
-    "bundled": 42383,
-    "minified": 30557,
-    "gzipped": 6834
+    "bundled": 42654,
+    "minified": 30676,
+    "gzipped": 6863
   },
   "index.esm.js": {
-    "bundled": 39735,
-    "minified": 28236,
-    "gzipped": 6681,
+    "bundled": 39999,
+    "minified": 28347,
+    "gzipped": 6717,
     "treeshaked": {
       "rollup": {
-        "code": 22677,
-        "import_statements": 718
+        "code": 22760,
+        "import_statements": 733
       },
       "webpack": {
-        "code": 25325
+        "code": 25443
       }
     }
   }

diff --git a/packages/modals/src/elements/Modal.tsx b/packages/modals/src/elements/Modal.tsx
@@ -5,7 +5,16 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { useEffect, useMemo, useContext, HTMLAttributes, useRef } from 'react';
+import React, {
+  useRef,
+  useState,
+  useEffect,
+  useMemo,
+  useContext,
+  createRef,
+  RefObject,
+  HTMLAttributes
+} from 'react';
 import { createPortal } from 'react-dom';
 import { ThemeContext } from 'styled-components';
 import PropTypes from 'prop-types';
@@ -104,6 +113,7 @@ export const Modal = React.forwardRef<HTMLDivElement, IModalProps>(
     const theme = useContext(ThemeContext);
     const modalRef = useRef<HTMLDivElement>(null);
     const environment = useDocument(theme);
+    const [scope, setScope] = useState<RefObject<HTMLElement>>(createRef());
 
     const {
       getBackdropProps,
@@ -119,7 +129,13 @@ export const Modal = React.forwardRef<HTMLDivElement, IModalProps>(
       restoreFocus
     });
 
-    useFocusVisible({ scope: modalRef });
+    useFocusVisible({ scope });
+
+    useEffect(() => {
+      if (modalRef.current) {
+        setScope(modalRef);
+      }
+    }, [modalRef]);
 
     useEffect(() => {
       if (!environment) {