From 09f74ad93f8e29dd0e08f30f68c1f3d0e8a09860 Mon Sep 17 00:00:00 2001
From: Brian Smith <112954497+brian-smith-tcril@users.noreply.github.com>
Date: Thu, 20 Jun 2024 13:55:34 -0400
Subject: [PATCH] fix: ignore `touchstart` events for closing modal popups
 (#3087)

---
 src/Modal/ModalPopup.jsx                  | 10 +++++++-
 src/Modal/tests/ModalPopupNoMock.test.jsx | 29 +++++++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 src/Modal/tests/ModalPopupNoMock.test.jsx

diff --git a/src/Modal/ModalPopup.jsx b/src/Modal/ModalPopup.jsx
index 52bc3adb04..e6c36fd45e 100644
--- a/src/Modal/ModalPopup.jsx
+++ b/src/Modal/ModalPopup.jsx
@@ -34,6 +34,14 @@ function ModalPopup({
     },
   ];
 
+  const handleOnClickOutside = (e) => {
+    if (e.type === 'touchstart') {
+      return;
+    }
+
+    onClose();
+  };
+
   return (
     <ModalContextProvider onClose={onClose} isOpen={isOpen} isBlocking={isBlocking}>
       <RootComponent>
@@ -47,7 +55,7 @@ function ModalPopup({
             scrollLock={false}
             enabled={isOpen}
             onEscapeKey={onClose}
-            onClickOutside={onClose}
+            onClickOutside={handleOnClickOutside}
           >
             {isOpen && (
               <div className="pgn__modal-popup__tooltip">
diff --git a/src/Modal/tests/ModalPopupNoMock.test.jsx b/src/Modal/tests/ModalPopupNoMock.test.jsx
new file mode 100644
index 0000000000..ac7ea3a4e8
--- /dev/null
+++ b/src/Modal/tests/ModalPopupNoMock.test.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ModalPopup from '../ModalPopup';
+
+describe('<ModalPopup />', () => {
+  const mockPositionRef = React.createRef();
+
+  describe('when isOpen', () => {
+    const isOpen = true;
+    const closeFn = jest.fn();
+
+    it('calls close on click events but not touchstart events', async () => {
+      render(
+        <ModalPopup
+          positionRef={mockPositionRef}
+          isOpen={isOpen}
+          onClose={closeFn}
+        >
+          <div>Modal Contents</div>
+        </ModalPopup>,
+      );
+      await fireEvent.touchStart(document.body);
+      expect(closeFn).not.toHaveBeenCalled();
+      await userEvent.click(document.body);
+      expect(closeFn).toHaveBeenCalled();
+    });
+  });
+});