Properly handle closing click events in modals

This commit is contained in:
Fedor Indutny 2022-09-14 18:58:35 -07:00 committed by GitHub
parent b348bf9b70
commit 635840cd99
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 257 additions and 178 deletions

View file

@ -13,6 +13,7 @@ import type { Theme } from '../util/theme';
import type { LocalizerType } from '../types/Util';
import { getClassNamesFor } from '../util/getClassNamesFor';
import { themeClassName } from '../util/theme';
import { handleOutsideClick } from '../util/handleOutsideClick';
export type ContextMenuOptionType<T> = {
readonly description?: string;
@ -104,20 +105,15 @@ export function ContextMenu<T>({
return noop;
}
const handleOutsideClick = (event: MouseEvent) => {
if (!referenceElement?.contains(event.target as Node)) {
return handleOutsideClick(
() => {
setIsMenuShowing(false);
closeCurrentOpenContextMenu = undefined;
event.stopPropagation();
event.preventDefault();
}
};
document.addEventListener('click', handleOutsideClick);
return () => {
document.removeEventListener('click', handleOutsideClick);
};
}, [isMenuShowing, referenceElement]);
return true;
},
{ containerElements: [referenceElement, popperElement] }
);
}, [isMenuShowing, referenceElement, popperElement]);
const handleKeyDown = (ev: KeyboardEvent) => {
if (!isMenuShowing) {