From 4c4918c4a4782242953bda28f9e2400be8aca0e6 Mon Sep 17 00:00:00 2001
From: Lee Goddard <leegee@gmail.com>
Date: Fri, 5 Jul 2024 18:28:13 +0200
Subject: [PATCH] Dialog close via ESC

---
 src/components/Dialog.jsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/Dialog.jsx b/src/components/Dialog.jsx
index ec6d6b7..cdaba97 100644
--- 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>