fix(modals): provide ref object for focusvisible

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

Hide file tree

Showing 2 changed files with 27 additions and 11 deletions.
diff --git a/packages/modals/.size-snapshot.json b/packages/modals/.size-snapshot.json
@@ -19,21 +19,21 @@
     }
   },
   "index.cjs.js": {
-    "bundled": 42383,
-    "minified": 30557,
-    "gzipped": 6834
+    "bundled": 42662,
+    "minified": 30684,
+    "gzipped": 6864
   },
   "index.esm.js": {
-    "bundled": 39735,
-    "minified": 28236,
-    "gzipped": 6681,
+    "bundled": 40007,
+    "minified": 28355,
+    "gzipped": 6720,
     "treeshaked": {
       "rollup": {
-        "code": 22677,
-        "import_statements": 718
+        "code": 22768,
+        "import_statements": 733
       },
       "webpack": {
-        "code": 25325
+        "code": 25451
       }
     }
   }

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) {