Add test cases for focus trap options

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.only('should focus on modal root', () => {
+    cy.get('button').eq(4).click();
+    cy.get('[data-testid=modal]').should('have.focus');
+  });
 });

website/src/components/ExampleRendered.tsx

@@ -2,6 +2,7 @@ import Simple from '../examples/Simple';
 import ExampleMultiple from '../examples/Multiple';
 import LongContent from '../examples/LongContent';
 import FocusTrapped from '../examples/FocusTrapped';
+import FocusTrappedOnModalRoot from '../examples/FocusTrappedOnModalRoot';
 import CustomCssStyle from '../examples/CustomCssStyle';
 import CustomAnimation from '../examples/CustomAnimation';
 import CustomCloseIcon from '../examples/CustomCloseIcon';
@@ -12,6 +13,7 @@ const examples: Record<string, () => JSX.Element> = {
   multiple: ExampleMultiple,
   longContent: LongContent,
   focusTrapped: FocusTrapped,
+  focusTrappedOnModalRoot: FocusTrappedOnModalRoot,
   customCssStyle: CustomCssStyle,
   customAnimation: CustomAnimation,
   customCloseIcon: CustomCloseIcon,

website/src/docs/index.mdx

@@ -93,6 +93,16 @@ If you want to disable this behavior, set the `focusTrapped` prop to `false`.
 
 ```
 
+### Focus Trapped on modal root
+
+You can also set to trap focus within the modal, but not to focus first visible element. To do this use `focusTrapOptions` prop and set `focusOn` to `modalRoot`.
+
+<ExampleRendered name="focusTrappedOnModalRoot" />
+
+```js file=../examples/FocusTrappedOnModalRoot.tsx
+
+```
+
 ### Custom styling with css
 
 Customising the Modal style via css is really easy. For example if you add the following css to your app you will get the following result:

website/src/examples/FocusTrapped.tsx

@@ -15,7 +15,7 @@ const App = () => {
         <form action="">
           <p>
             <label htmlFor="firstName">
-              First name
+              First name (I should be focused be default)
               <input type="text" />
             </label>
           </p>

website/src/examples/FocusTrappedOnModalRoot.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Modal } from 'react-responsive-modal';
+
+const App = () => {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <button className="button" onClick={() => setOpen(true)}>
+        Open modal
+      </button>
+
+      <Modal
+        open={open}
+        onClose={() => setOpen(false)}
+        focusTrapOptions={{ focusOn: 'modalRoot' }}
+      >
+        <h2>Try tabbing/shift-tabbing thru elements</h2>
+        <form action="">
+          <p>
+            <label htmlFor="firstName">
+              First name (I shouldn't be focused - press Tab to focus me)
+              <input type="text" />
+            </label>
+          </p>
+          <p>
+            <label htmlFor="lastName">
+              Last name
+              <input type="text" />
+            </label>
+          </p>
+          <button>test</button>
+          <input type="submit" value="Submit" />
+        </form>
+      </Modal>
+    </>
+  );
+};
+
+export default App;