Add 'Enter' key submission for message sending confirmation (#519)

ztjhz · Jan 23, 2024 · c838df8 · c838df8
1 parent 28c0b88
commit c838df8
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);
+    };
+  }, []);
+
   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'>