diff --git a/web/modals/modal.react.js b/web/modals/modal.react.js
index 1f68556c3..169bd0470 100644
--- a/web/modals/modal.react.js
+++ b/web/modals/modal.react.js
@@ -1,108 +1,117 @@
// @flow
import classNames from 'classnames';
import * as React from 'react';
import SWMansionIcon, { type Icon } from '../SWMansionIcon.react';
import css from './modal.css';
export type ModalSize = 'small' | 'large' | 'fit-content';
export type ModalOverridableProps = {
+name: string,
+icon?: Icon,
+onClose: () => void,
+withCloseButton?: boolean,
+size?: ModalSize,
};
type ModalProps = {
...ModalOverridableProps,
+children?: React.Node,
};
function Modal(props: ModalProps): React.Node {
const {
size = 'small',
children,
onClose,
name,
icon,
withCloseButton = true,
} = props;
const overlayRef = React.useRef();
+ const firstClickRef = React.useRef(null);
- const onBackgroundClick = React.useCallback(
+ const onBackgroundMouseDown = React.useCallback(event => {
+ firstClickRef.current = event.target;
+ }, []);
+
+ const onBackgroundMouseUp = React.useCallback(
event => {
- if (event.target === overlayRef.current) {
+ if (
+ event.target === overlayRef.current &&
+ firstClickRef.current === overlayRef.current
+ ) {
onClose();
}
},
[onClose],
);
const onKeyDown = React.useCallback(
event => {
if (event.keyCode === 27) {
onClose();
}
},
[onClose],
);
React.useEffect(() => {
if (overlayRef.current) {
overlayRef.current.focus();
}
}, []);
const modalContainerClasses = React.useMemo(
() =>
classNames(css.modalContainer, {
[css.modalContainerLarge]: size === 'large',
[css.modalContainerSmall]: size === 'small',
}),
[size],
);
const cornerCloseButton = React.useMemo(() => {
if (!withCloseButton) {
return null;
}
return (