feat: add options to set initial focus within modal (#476)

Author: megawebmaster

react-responsive-modal/__tests__/index.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render, fireEvent, waitFor } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import { Modal } from '../src';
 
 describe('modal', () => {

react-responsive-modal/cypress/integration/modal.spec.ts

@@ -65,4 +65,14 @@ describe('simple modal', () => {
     cy.get('[data-testid=modal]').should('not.exist');
     cy.get('body').should('not.have.css', 'overflow', 'hidden');
   });
+
+  it('should focus first element within modal', () => {
+    cy.get('button').eq(3).click();
+    cy.get('[data-testid=modal] input').first().should('have.focus');
+  });
+
+  it('should focus on modal root', () => {
+    cy.get('button').eq(4).click();
+    cy.get('[data-testid=modal]').should('have.focus');
+  });
 });

react-responsive-modal/package.json

@@ -47,14 +47,15 @@
   "size-limit": [
     {
       "path": "dist/react-responsive-modal.cjs.production.min.js",
-      "limit": "3.8 KB"
+      "limit": "4.0 KB"
     },
     {
       "path": "dist/react-responsive-modal.esm.js",
-      "limit": "3.8 KB"
+      "limit": "4.0 KB"
     }
   ],
   "dependencies": {
+    "@bedrock-layout/use-forwarded-ref": "^1.1.4",
     "body-scroll-lock": "^3.1.5",
     "classnames": "^2.2.6"
   },

react-responsive-modal/src/FocusTrap.tsx

@@ -8,9 +8,10 @@ import {
 
 interface FocusTrapProps {
   container?: React.RefObject<HTMLElement> | null;
+  initialFocusRef?: React.RefObject<HTMLElement>;
 }
 
-export const FocusTrap = ({ container }: FocusTrapProps) => {
+export const FocusTrap = ({ container, initialFocusRef }: FocusTrapProps) => {
   const refLastFocus = useRef<HTMLElement | null>();
   /**
    * Handle focus lock on the modal
@@ -27,8 +28,7 @@ export const FocusTrap = ({ container }: FocusTrapProps) => {
     }
     // On mount we focus on the first focusable element in the modal if there is one
     if (isBrowser && container?.current) {
-      const allTabbingElements = getAllTabbingElements(container.current);
-      if (allTabbingElements[0]) {
+      const savePreviousFocus = () => {
         // First we save the last focused element
         // only if it's a focusable element
         if (
@@ -38,7 +38,20 @@ export const FocusTrap = ({ container }: FocusTrapProps) => {
         ) {
           refLastFocus.current = document.activeElement as HTMLElement;
         }
-        allTabbingElements[0].focus();
+      };
+
+      if (initialFocusRef) {
+        savePreviousFocus();
+        // We need to schedule focusing on a next frame - this allows to focus on the modal root
+        requestAnimationFrame(() => {
+          initialFocusRef.current?.focus();
+        });
+      } else {
+        const allTabbingElements = getAllTabbingElements(container.current);
+        if (allTabbingElements[0]) {
+          savePreviousFocus();
+          allTabbingElements[0].focus();
+        }
       }
     }
     return () => {
@@ -48,7 +61,7 @@ export const FocusTrap = ({ container }: FocusTrapProps) => {
         refLastFocus.current?.focus();
       }
     };
-  }, [container]);
+  }, [container, initialFocusRef]);
 
   return null;
 };