fix: ignore touchstart events for closing modal popups (#3087)

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">

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();
+    });
+  });
+});