From 45fd84c8f7a1749d67ffbd24e115cf8af22ffaef Mon Sep 17 00:00:00 2001
From: iower <iower@tutanota.com>
Date: Fri, 10 Nov 2023 18:54:28 +0500
Subject: [PATCH] CommandMenu: fix Esc

---
 src/components/main/CommandMenu.tsx | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/components/main/CommandMenu.tsx b/src/components/main/CommandMenu.tsx
index 43490d0dc1..e8e7c71dcf 100644
--- a/src/components/main/CommandMenu.tsx
+++ b/src/components/main/CommandMenu.tsx
@@ -9,6 +9,8 @@ import {
 } from '../../lib/teact/teact';
 import { getActions } from '../../global';
 
+import captureKeyboardListeners from '../../util/captureKeyboardListeners';
+
 import useArchiver from '../../hooks/useArchiver';
 import { useJune } from '../../hooks/useJune';
 
@@ -19,7 +21,7 @@ const cmdkRoot = document.getElementById('cmdk-root');
 const CommandMenu = () => {
   const { track } = useJune();
   const { showNotification } = getActions();
-  const [open, setOpen] = useState(false);
+  const [isOpen, setOpen] = useState(false);
   const [isArchiverEnabled, setIsArchiverEnabled] = useState(
     !!JSON.parse(String(localStorage.getItem('ulu_is_autoarchiver_enabled'))),
   );
@@ -29,7 +31,7 @@ const CommandMenu = () => {
   useEffect(() => {
     const listener = (e: KeyboardEvent) => {
       if ((e.metaKey || e.ctrlKey) && !e.shiftKey && e.code === 'KeyK') {
-        setOpen(!open);
+        setOpen(!isOpen);
         e.preventDefault();
         e.stopPropagation();
       }
@@ -37,19 +39,15 @@ const CommandMenu = () => {
 
     document.addEventListener('keydown', listener);
     return () => document.removeEventListener('keydown', listener);
-  }, [open]);
+  }, [isOpen]);
 
   const close = useCallback(() => {
     setOpen(false);
   }, []);
 
-  const onKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
-    if (e.code === 'Escape') {
-      e.stopPropagation();
-      e.preventDefault();
-      close();
-    }
-  }, [close]);
+  useEffect(() => (
+    isOpen ? captureKeyboardListeners({ onEsc: close }) : undefined
+  ), [isOpen, close]);
 
   const commandToggleArchiver = useCallback(() => {
     const updIsArchiverEnabled = !isArchiverEnabled;
@@ -69,11 +67,10 @@ const CommandMenu = () => {
   }, [close, archiveMessages, track]);
 
   const CommandMenuInner = (
-    <Command.Dialog label="Command Menu" open={open} onOpenChange={setOpen}>
+    <Command.Dialog label="Command Menu" open={isOpen} onOpenChange={setOpen}>
       <Command.Input
         placeholder="Search for command..."
         autoFocus
-        onKeyDown={onKeyDown}
       />
       <Command.List>
         <Command.Empty>No results found.</Command.Empty>