diff --git a/web/modals/modal.react.js b/web/modals/modal.react.js
--- a/web/modals/modal.react.js
+++ b/web/modals/modal.react.js
@@ -31,10 +31,22 @@
     withCloseButton = true,
   } = props;
   const overlayRef = React.useRef();
+  const isBackgroundClick = React.useRef(null);
 
-  const onBackgroundClick = React.useCallback(
+  const onBackgroundMouseDown = React.useCallback(event => {
+    if (event.target === overlayRef.current) {
+      isBackgroundClick.current = true;
+    } else {
+      isBackgroundClick.current = false;
+    }
+  }, []);
+
+  const onBackgroundMouseUp = React.useCallback(
     event => {
-      if (event.target === overlayRef.current) {
+      if (
+        event.target === overlayRef.current &&
+        isBackgroundClick.current === true
+      ) {
         onClose();
       }
     },
@@ -87,7 +99,8 @@
     <div
       className={css.modalOverlay}
       ref={overlayRef}
-      onClick={onBackgroundClick}
+      onMouseDown={onBackgroundMouseDown}
+      onMouseUp={onBackgroundMouseUp}
       tabIndex={0}
       onKeyDown={onKeyDown}
     >