fix(Modal): modal no longer sets focus when close prop changes (#1253)

Author: ethanashaw

src/components/Modal/Modal.test.tsx

@@ -1,7 +1,9 @@
 import userEvent from "@testing-library/user-event";
 import { render, screen } from "@testing-library/react";
-import React, { useEffect } from "react";
+import React, { FC, useEffect, useState } from "react";
 
+import Button from "components/Button";
+import Input from "components/Input";
 import Modal from "./Modal";
 
 describe("Modal ", () => {
@@ -189,4 +191,35 @@ describe("Modal ", () => {
     await userEvent.click(container);
     expect(handleCloseModal).toHaveBeenCalledTimes(0);
   });
+
+  it("doesn't lose focus when close prop changes", async () => {
+    const TestComponent: FC = () => {
+      const [inputText, setInputText] = useState("");
+
+      const handleCloseModal = () => {
+        setInputText("");
+      };
+
+      return (
+        <div>
+          <Modal title="Delete item1" close={handleCloseModal}>
+            <Button>Show help</Button>
+            <p>Type "delete item1" to confirm.</p>
+            <Input
+              type="text"
+              value={inputText}
+              onChange={(event) => setInputText(event.target.value)}
+            />
+          </Modal>
+        </div>
+      );
+    };
+
+    const { container } = render(<TestComponent />);
+
+    const input = container.querySelector("input");
+    await userEvent.type(container.querySelector("input"), "delete item1");
+    expect(input).toHaveFocus();
+    expect(input).toHaveValue("delete item1");
+  });
 });

src/components/Modal/Modal.tsx

@@ -106,17 +106,19 @@ export const Modal = ({
     modalRef.current.focus();
   }, [modalRef]);
 
+  const hasCloseButton = !!close;
+
   useEffect(() => {
     focusableModalElements.current = modalRef.current.querySelectorAll(
       focusableElementSelectors,
     );
     let focusIndex = 0;
     // when the close button is rendered, focus on the 2nd content element and not the close btn.
-    if (close && focusableModalElements.current.length > 1) {
+    if (hasCloseButton && focusableModalElements.current.length > 1) {
       focusIndex = 1;
     }
     focusableModalElements.current[focusIndex]?.focus({ preventScroll: true });
-  }, [close]);
+  }, [hasCloseButton]);
 
   useEffect(() => {
     const keyDown = (event: KeyboardEvent) => {
@@ -183,7 +185,7 @@ export const Modal = ({
             <h2 className="p-modal__title" id={titleId}>
               {title}
             </h2>
-            {!!close && (
+            {hasCloseButton && (
               <button
                 type="button"
                 className="p-modal__close"