feat: prevent modal from closing when clicking outside (#1177)

Signed-off-by: Mason Hu <[email protected]>

Author: mas-who

src/components/Modal/Modal.stories.tsx

@@ -29,6 +29,10 @@ const meta: Meta<typeof Modal> = {
         disable: true,
       },
     },
+
+    closeOnOutsideClick: {
+      control: "boolean",
+    },
   },
 };
 
@@ -37,7 +41,7 @@ export default meta;
 type Story = StoryObj<typeof Modal>;
 
 export const Default: Story = {
-  render: () => {
+  render: ({ closeOnOutsideClick }) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [modalOpen, setModalOpen] = useState(true);
     const closeHandler = () => setModalOpen(false);
@@ -49,6 +53,7 @@ export const Default: Story = {
           <Modal
             close={closeHandler}
             title="Confirm delete"
+            closeOnOutsideClick={closeOnOutsideClick}
             buttonRow={
               <>
                 <button className="u-no-margin--bottom" onClick={closeHandler}>

src/components/Modal/Modal.test.tsx

@@ -171,4 +171,22 @@ describe("Modal ", () => {
     await userEvent.click(closeButton!);
     expect(handleExternalClick).toHaveBeenCalledTimes(1);
   });
+
+  it("should not close modal on outside click if closeOnOutsideClick is false", async () => {
+    const handleCloseModal = jest.fn();
+    const { container } = render(
+      <div>
+        <Modal
+          title="Test"
+          close={handleCloseModal}
+          closeOnOutsideClick={false}
+        >
+          Bare bones
+        </Modal>
+      </div>,
+    );
+
+    await userEvent.click(container);
+    expect(handleCloseModal).toHaveBeenCalledTimes(0);
+  });
 });

src/components/Modal/Modal.tsx

@@ -29,6 +29,10 @@ export type Props = PropsWithSpread<
      * Whether the button click event should propagate.
      */
     shouldPropagateClickEvent?: boolean;
+    /**
+     * Whether the modal should close when clicking outside the modal.
+     */
+    closeOnOutsideClick?: boolean;
   },
   HTMLProps<HTMLDivElement>
 >;
@@ -45,6 +49,7 @@ export const Modal = ({
   close,
   title,
   shouldPropagateClickEvent = false,
+  closeOnOutsideClick = true,
   ...wrapperProps
 }: Props): ReactElement => {
   // list of focusable selectors is based on this Stack Overflow answer:
@@ -136,7 +141,7 @@ export const Modal = ({
   const handleOverlayOnMouseDown = (
     event: React.MouseEvent<HTMLDivElement>,
   ) => {
-    if (event.target === modalRef.current) {
+    if (event.target === modalRef.current && closeOnOutsideClick) {
       shouldClose.current = true;
     }
   };