Properly handle closing click events in modals
This commit is contained in:
parent
b348bf9b70
commit
635840cd99
13 changed files with 257 additions and 178 deletions
|
@ -9,6 +9,7 @@ import classNames from 'classnames';
|
|||
import { Manager, Popper, Reference } from 'react-popper';
|
||||
import type { LocalizerType } from '../types/Util';
|
||||
import { useRefMerger } from '../hooks/useRefMerger';
|
||||
import { handleOutsideClick } from '../util/handleOutsideClick';
|
||||
|
||||
export type PropsType = {
|
||||
i18n: LocalizerType;
|
||||
|
@ -66,21 +67,9 @@ export const MediaQualitySelector = ({
|
|||
const root = document.createElement('div');
|
||||
setPopperRoot(root);
|
||||
document.body.appendChild(root);
|
||||
const handleOutsideClick = (event: MouseEvent) => {
|
||||
if (
|
||||
!root.contains(event.target as Node) &&
|
||||
event.target !== buttonRef.current
|
||||
) {
|
||||
handleClose();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
};
|
||||
document.addEventListener('click', handleOutsideClick);
|
||||
|
||||
return () => {
|
||||
document.body.removeChild(root);
|
||||
document.removeEventListener('click', handleOutsideClick);
|
||||
setPopperRoot(null);
|
||||
};
|
||||
}
|
||||
|
@ -88,6 +77,20 @@ export const MediaQualitySelector = ({
|
|||
return noop;
|
||||
}, [menuShowing, setPopperRoot, handleClose]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!menuShowing) {
|
||||
return noop;
|
||||
}
|
||||
|
||||
return handleOutsideClick(
|
||||
() => {
|
||||
handleClose();
|
||||
return true;
|
||||
},
|
||||
{ containerElements: [popperRoot, buttonRef] }
|
||||
);
|
||||
}, [menuShowing, popperRoot, handleClose]);
|
||||
|
||||
return (
|
||||
<Manager>
|
||||
<Reference>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue