Fix chrome dismissing modals when dragging out of it; closes #2295

This commit is contained in:
Dane Everitt 2020-09-09 20:55:23 -07:00
parent b4599a2561
commit 6139b4e479
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
1 changed files with 14 additions and 12 deletions

View File

@ -47,20 +47,21 @@ const Modal: React.FC<ModalProps> = ({ visible, appear, dismissable, showSpinner
return (dismissable || true) && !(showSpinnerOverlay || false);
}, [ dismissable, showSpinnerOverlay ]);
const handleEscapeEvent = (e: KeyboardEvent) => {
if (isDismissable && closeOnEscape && e.key === 'Escape') {
setRender(false);
}
};
useEffect(() => {
if (!isDismissable || !closeOnEscape) return;
const handler = (e: KeyboardEvent) => {
if (e.key === 'Escape') setRender(false);
};
window.addEventListener('keydown', handler);
return () => {
window.removeEventListener('keydown', handler);
};
}, [ isDismissable, closeOnEscape, render ]);
useEffect(() => setRender(visible), [ visible ]);
useEffect(() => {
window.addEventListener('keydown', handleEscapeEvent);
return () => window.removeEventListener('keydown', handleEscapeEvent);
}, [ render ]);
return (
<Fade
in={render}
@ -70,7 +71,8 @@ const Modal: React.FC<ModalProps> = ({ visible, appear, dismissable, showSpinner
onExited={() => onDismissed()}
>
<ModalMask
onClick={e => {
onClick={e => e.stopPropagation()}
onMouseDown={e => {
if (isDismissable && closeOnBackground) {
e.stopPropagation();
if (e.target === e.currentTarget) {