Update PopupModal.tsx

AthanaD · Mar 8, 2024 · 0e02de8 · 0e02de8
1 parent 884295e
commit 0e02de8
Showing 1 changed file with 17 additions and 1 deletion.
diff --git a/src/components/PopupModal/PopupModal.tsx b/src/components/PopupModal/PopupModal.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { useTranslation } from 'react-i18next';
 
@@ -36,6 +36,22 @@ const PopupModal = ({
     else _handleClose();
   };
 
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      if (handleClickBackdrop) handleClickBackdrop();
+      else handleClose ? handleClose() : setIsModalOpen(false);
+    } else if (event.key === 'Enter') {
+      if (handleConfirm) handleConfirm();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleConfirm, handleClose, handleClickBackdrop]);
+
   if (modalRoot) {
     return ReactDOM.createPortal(
       <div className='fixed top-0 left-0 z-[999] w-full p-4 overflow-x-hidden overflow-y-auto h-full flex justify-center items-center'>