feat: automatically selects the first entry after searching (#411)

ayangweb · web-flow · commit d67d6645fe26 · 2025-04-22T16:13:23.000+08:00
* feat: automatically selects the first entry after searching

* docs: update changelog

* refactor: remove debug log statements
diff --git a/docs/content.en/docs/release-notes/_index.md b/docs/content.en/docs/release-notes/_index.md
@@ -26,6 +26,7 @@ Information about release notes of Coco Server is provided here.
 - feat: add error notification #386
 - feat: add support for AI assistant #394
 - feat: add support for calculator function #399
+- feat: auto selects the first item after searching #411
 
 ### Bug fix
 
diff --git a/src/components/Common/Icons/TypeIcon.tsx b/src/components/Common/Icons/TypeIcon.tsx
@@ -17,7 +17,6 @@ function TypeIcon({
   className = "w-5 h-5 flex-shrink-0",
   onClick = () => {},
 }: TypeIconProps) {
-  console.log("item", item);
   const endpoint_http = useAppStore((state) => state.endpoint_http);
   const connectorSource = useFindConnectorIcon(item);
 
diff --git a/src/components/Search/ContextMenu.tsx b/src/components/Search/ContextMenu.tsx
@@ -1,9 +1,4 @@
-import {
-  useClickAway,
-  useCreation,
-  useEventListener,
-  useReactive,
-} from "ahooks";
+import { useClickAway, useCreation, useReactive } from "ahooks";
 import clsx from "clsx";
 import { isNil, noop } from "lodash-es";
 import { Copy, Link, SquareArrowOutUpRight } from "lucide-react";
@@ -15,6 +10,7 @@ import { useSearchStore } from "@/stores/searchStore";
 import { copyToClipboard, OpenURLWithBrowser } from "@/utils";
 import { isMac } from "@/utils/platform";
 import { CONTEXT_MENU_PANEL_ID } from "@/constants";
+import { useShortcutsStore } from "@/stores/shortcutsStore";
 
 interface State {
   activeMenuIndex: number;
@@ -36,6 +32,7 @@ const ContextMenu = ({ hideCoco }: ContextMenuProps) => {
   const setVisibleContextMenu = useSearchStore((state) => {
     return state.setVisibleContextMenu;
   });
+  const setOpenPopover = useShortcutsStore((state) => state.setOpenPopover);
 
   const selectedSearchContent = useSearchStore((state) => {
     return state.selectedSearchContent;
@@ -157,11 +154,9 @@ const ContextMenu = ({ hideCoco }: ContextMenuProps) => {
     handleClick(item?.clickEvent);
   });
 
-  useEventListener("keydown", (event) => {
-    if (!visibleContextMenu) return;
-
-    event.stopImmediatePropagation();
-  });
+  useEffect(() => {
+    setOpenPopover(visibleContextMenu);
+  }, [visibleContextMenu]);
 
   const handleClick = (click = noop) => {
     click?.();
diff --git a/src/components/Search/DropdownList.tsx b/src/components/Search/DropdownList.tsx
@@ -75,6 +75,10 @@ function DropdownList({
     }
   }, [isChatMode]);
 
+  useEffect(() => {
+    setSelectedItem(0);
+  }, [suggests]);
+
   const openPopover = useShortcutsStore((state) => state.openPopover);
 
   const handleKeyDown = useCallback(
@@ -85,6 +89,7 @@ function DropdownList({
       //   showIndex,
       //   e.key >= "0" && e.key <= "9" && showIndex
       // );
+
       if (!suggests.length || openPopover) return;
 
       if (e.key === "ArrowUp") {
@@ -141,7 +146,7 @@ function DropdownList({
         }
       }
     },
-    [suggests, selectedItem, showIndex, globalItemIndexMap]
+    [suggests, selectedItem, showIndex, globalItemIndexMap, openPopover]
   );
 
   const handleKeyUp = useCallback((e: KeyboardEvent) => {
