diff --git a/ivette/src/dome/renderer/dialogs.tsx b/ivette/src/dome/renderer/dialogs.tsx index bed492719c24892736d303ea0fe82e3eddcd795a..786e6ff9e36025a676cceb52b88551681b270b50 100644 --- a/ivette/src/dome/renderer/dialogs.tsx +++ b/ivette/src/dome/renderer/dialogs.tsx @@ -336,10 +336,21 @@ export function Modal( const { label, title, icon, className, onClose, children } = props; const contentClasses = classes('dome-xModal-content', className); - const onCloseModal = (): void => { + const onCloseModal = React.useCallback((): void => { closeModal(); if(onClose) onClose(); - }; + }, [onClose]); + + React.useEffect(() => { + const handleKeyDown = (event: KeyboardEvent): void => { + if (event.key === "Escape") onCloseModal(); + }; + + window.addEventListener("keydown", handleKeyDown); + return () => { + window.removeEventListener("keydown", handleKeyDown); + }; + }, [onCloseModal]); return ( <div className={contentClasses}>