Dialog close via ESC

leegee · Jul 5, 2024 · 4c4918c · 4c4918c
1 parent 3eed62d
commit 4c4918c
Showing 1 changed file with 14 additions and 1 deletion.
diff --git a/src/components/Dialog.jsx b/src/components/Dialog.jsx
@@ -1,6 +1,6 @@
 /* Dialog.jsx */
 // components/Dialog.js
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import styles from './Dialog.module.css';
 
@@ -13,6 +13,19 @@ export default function Dialog ( { isOpen, onClose, children } ) {
         dialogRef.current.close();
     }
 
+    useEffect( () => {
+        if ( isOpen && dialogRef.current ) {
+            const dialogRefCurrent = dialogRef.current;
+            const onCancel = () => {
+                console.log( 'Dialog canceled (ESC key pressed or outside click)' );
+                onClose();
+            };
+
+            dialogRefCurrent.addEventListener( 'cancel', onCancel );
+            return () => dialogRefCurrent.removeEventListener( 'cancel', onCancel );
+        }
+    }, [ dialogRef, isOpen, onClose ] );
+
     return (
         <dialog ref={ dialogRef } className={ styles.dialog }>
             <button className={ styles.close } onClick={ onClose } title='Close'>×</button>