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 ( @@ -47,7 +55,7 @@ function ModalPopup({ scrollLock={false} enabled={isOpen} onEscapeKey={onClose} - onClickOutside={onClose} + onClickOutside={handleOnClickOutside} > {isOpen && (
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('', () => { + 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( + +
Modal Contents
+
, + ); + await fireEvent.touchStart(document.body); + expect(closeFn).not.toHaveBeenCalled(); + await userEvent.click(document.body); + expect(closeFn).toHaveBeenCalled(); + }); + }); +});