Add option to focus on any element - including modal root

pradel · May 28, 2021 · 688f0b7 · 688f0b7
1 parent 32c976c
commit 688f0b7
Show file tree

Hide file tree

Showing 7 changed files with 226 additions and 193 deletions.
diff --git a/react-responsive-modal/package.json b/react-responsive-modal/package.json
@@ -55,6 +55,7 @@
     }
   ],
   "dependencies": {
+    "@bedrock-layout/use-forwarded-ref": "^1.1.4",
     "body-scroll-lock": "^3.1.5",
     "classnames": "^2.2.6"
   },

diff --git a/react-responsive-modal/src/FocusTrap.tsx b/react-responsive-modal/src/FocusTrap.tsx
@@ -7,7 +7,7 @@ import {
 } from './lib/focusTrapJs';
 
 export interface FocusTrapOptions {
-  focusOn?: 'firstFocusableElement' | 'modalRoot';
+  focusOn?: React.RefObject<HTMLElement>;
 }
 
 interface FocusTrapProps {
@@ -44,15 +44,18 @@ export const FocusTrap = ({ container, options }: FocusTrapProps) => {
         }
       };
 
-      if (options?.focusOn === 'firstFocusableElement') {
+      if (options?.focusOn) {
+        savePreviousFocus();
+        // We need to schedule focusing on a next frame - this allows to focus on the modal root
+        requestAnimationFrame(() => {
+          options.focusOn?.current?.focus();
+        });
+      } else {
         const allTabbingElements = getAllTabbingElements(container.current);
         if (allTabbingElements[0]) {
           savePreviousFocus();
           allTabbingElements[0].focus();
         }
-      } else if (options?.focusOn === 'modalRoot') {
-        savePreviousFocus();
-        container?.current?.focus();
       }
     }
     return () => {