feat: support esc to exit right-click menu (#415)

ayangweb · web-flow · commit 5b0fdbcb2c81 · 2025-04-22T19:58:47.000+08:00
diff --git a/src/components/Search/DropdownList.tsx b/src/components/Search/DropdownList.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState, useCallback, MouseEvent } from "react";
 import { CircleAlert, Bolt, X, ArrowBigRight } from "lucide-react";
 import { isNil } from "lodash-es";
-import { useUnmount } from "ahooks";
+import { useDebounceFn, useUnmount } from "ahooks";
 
 import { useSearchStore } from "@/stores/searchStore";
 import ThemedIcon from "@/components/Common/Icons/ThemedIcon";
@@ -56,6 +56,7 @@ function DropdownList({
   };
 
   useUnmount(() => {
+    setSelectedItem(null);
     setSelectedSearchContent(void 0);
   });
 
@@ -75,9 +76,13 @@ function DropdownList({
     }
   }, [isChatMode]);
 
+  const { run } = useDebounceFn(() => setSelectedItem(0), { wait: 200 });
+
   useEffect(() => {
-    setSelectedItem(0);
-  }, [suggests]);
+    setSelectedItem(null);
+
+    run();
+  }, [SearchData]);
 
   const openPopover = useShortcutsStore((state) => state.openPopover);
 
diff --git a/src/components/Search/InputBox.tsx b/src/components/Search/InputBox.tsx
@@ -183,13 +183,23 @@ export default function ChatInput({
 
   useKeyPress(`${modifierKey}.${returnToInput}`, handleToggleFocus);
 
+  const visibleContextMenu = useSearchStore((state) => {
+    return state.visibleContextMenu;
+  });
+  const setVisibleContextMenu = useSearchStore((state) => {
+    return state.setVisibleContextMenu;
+  });
+
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
       // console.log("handleKeyDown", e.code, e.key);
 
       if (e.key === "Escape") {
-        handleEscapeKey();
-        return;
+        if (visibleContextMenu) {
+          return setVisibleContextMenu(false);
+        }
+
+        return handleEscapeKey();
       }
 
       pressedKeys.add(e.key);
@@ -239,6 +249,7 @@ export default function ChatInput({
       setIsCommandPressed,
       disabledChange,
       curChatEnd,
+      visibleContextMenu,
     ]
   );
 
diff --git a/src/hooks/useEscape.ts b/src/hooks/useEscape.ts
@@ -1,20 +1,34 @@
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
 
 import platformAdapter from "@/utils/platformAdapter";
+import { useSearchStore } from "@/stores/searchStore";
 
 const useEscape = () => {
-  const handleEscape = async (event: KeyboardEvent) => {
-    if (event.key === "Escape") {
-      console.log("Escape key pressed.");
+  const visibleContextMenu = useSearchStore((state) => {
+    return state.visibleContextMenu;
+  });
+  const setVisibleContextMenu = useSearchStore((state) => {
+    return state.setVisibleContextMenu;
+  });
 
-      event.preventDefault();
+  const handleEscape = useCallback(() => {
+    async (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        console.log("Escape key pressed.");
 
-      // Hide the Tauri app window when 'Esc' is pressed
-      await platformAdapter.invokeBackend("hide_coco");
+        event.preventDefault();
 
-      console.log("App window hidden successfully.");
-    }
-  };
+        if (visibleContextMenu) {
+          return setVisibleContextMenu(false);
+        }
+
+        // Hide the Tauri app window when 'Esc' is pressed
+        await platformAdapter.invokeBackend("hide_coco");
+
+        console.log("App window hidden successfully.");
+      }
+    };
+  }, [visibleContextMenu]);
 
   useEffect(() => {
     const unlisten = platformAdapter.listenEvent("tauri://focus", () => {
