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
|
@ -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) {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue