From 12d43322ad70f5b286da73f5ef2eb834c0498d1d Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 11 Dec 2021 17:05:51 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=8F=91=E9=80=81?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E6=8C=89=E5=9B=9E=E8=BD=A6=E6=97=B6=E4=BC=9A?=
 =?UTF-8?q?=E5=90=8C=E6=97=B6=E8=A7=A6=E5=8F=91=E5=8F=91=E9=80=81=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modals/ImageUploadPreviewer.tsx           | 19 +++++++++++++------
 web/src/hooks/useGlobalKeyDown.ts             |  9 ++++++---
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/web/src/components/modals/ImageUploadPreviewer.tsx b/web/src/components/modals/ImageUploadPreviewer.tsx
index 3c5a8be5..7b7f449d 100644
--- a/web/src/components/modals/ImageUploadPreviewer.tsx
+++ b/web/src/components/modals/ImageUploadPreviewer.tsx
@@ -20,13 +20,20 @@ export const ImageUploadPreviewer: React.FC<ImageUploadPreviewerProps> =
       }
     }, [props.onConfirm]);
 
-    useGlobalKeyDown((e) => {
-      if (isEnterHotkey(e)) {
-        handleConfirm();
-      } else if (isEscHotkey(e)) {
-        props.onCancel();
+    useGlobalKeyDown(
+      (e) => {
+        if (isEnterHotkey(e)) {
+          e.stopPropagation();
+          handleConfirm();
+        } else if (isEscHotkey(e)) {
+          e.stopPropagation();
+          props.onCancel();
+        }
+      },
+      {
+        capture: true,
       }
-    });
+    );
 
     return (
       <ModalWrapper style={{ maxHeight: '60vh', maxWidth: '60vw' }}>
diff --git a/web/src/hooks/useGlobalKeyDown.ts b/web/src/hooks/useGlobalKeyDown.ts
index 7803313c..bf909200 100644
--- a/web/src/hooks/useGlobalKeyDown.ts
+++ b/web/src/hooks/useGlobalKeyDown.ts
@@ -5,7 +5,10 @@ import { useUpdateRef } from 'tailchat-shared';
  * keydown hooks
  * 仅接受最初的函数
  */
-export function useGlobalKeyDown(fn: (e: KeyboardEvent) => void) {
+export function useGlobalKeyDown(
+  fn: (e: KeyboardEvent) => void,
+  options?: AddEventListenerOptions
+) {
   const fnRef = useUpdateRef(fn);
 
   useLayoutEffect(() => {
@@ -13,10 +16,10 @@ export function useGlobalKeyDown(fn: (e: KeyboardEvent) => void) {
       typeof fnRef.current === 'function' && fnRef.current(e);
     };
 
-    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('keydown', handleKeyDown, options);
 
     return () => {
-      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('keydown', handleKeyDown, options);
     };
   }, []);
 }