Skip to content

Commit

Permalink
fix: ignore touchstart events for closing modal popups (#3087)
Browse files Browse the repository at this point in the history
  • Loading branch information
brian-smith-tcril authored Jun 20, 2024
1 parent b27c146 commit ae3cdee
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 1 deletion.
10 changes: 9 additions & 1 deletion src/Modal/ModalPopup.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,14 @@ function ModalPopup({
},
];

const handleOnClickOutside = (e) => {
if (e.type === 'touchstart') {
return;
}

onClose();
};

return (
<ModalContextProvider onClose={onClose} isOpen={isOpen} isBlocking={isBlocking}>
<RootComponent>
Expand All @@ -47,7 +55,7 @@ function ModalPopup({
scrollLock={false}
enabled={isOpen}
onEscapeKey={onClose}
onClickOutside={onClose}
onClickOutside={handleOnClickOutside}
>
{isOpen && (
<div className="pgn__modal-popup__tooltip">
Expand Down
29 changes: 29 additions & 0 deletions src/Modal/tests/ModalPopupNoMock.test.jsx
Original file line number Diff line number Diff line change
@@ -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();
});
});
});

0 comments on commit ae3cdee

Please sign in to comment.