fix: make search on sidebar shortcut not be triggered inside inputs (#5345)

* added search components on sidebar shortcut

* Implemented search components sidebar shortcut on flow sidebar component

---------

Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>

src/frontend/src/constants/constants.ts

@@ -764,6 +764,11 @@ export const defaultShortcuts = [
     name: "Advanced Settings",
     shortcut: "mod+shift+a",
   },
+  {
+    display_name: "Search Components on Sidebar",
+    name: "Search Components Sidebar",
+    shortcut: "/",
+  },
   {
     display_name: "Minimize",
     name: "Minimize",

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx

@@ -2,25 +2,14 @@ import Fuse from "fuse.js";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook"; // Import useHotkeys
 
-import ForwardedIconComponent from "@/components/common/genericIconComponent";
-import {
-  Disclosure,
-  DisclosureContent,
-  DisclosureTrigger,
-} from "@/components/ui/disclosure";
 import {
   Sidebar,
   SidebarContent,
   SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
   useSidebar,
 } from "@/components/ui/sidebar";
 import { useAddComponent } from "@/hooks/useAddComponent";
+import { useShortcutsStore } from "@/stores/shortcuts";
 import { useStoreStore } from "@/stores/storeStore";
 import { checkChatInput } from "@/utils/reactflowUtils";
 import {
@@ -34,12 +23,12 @@ import useFlowStore from "../../../../stores/flowStore";
 import { useTypesStore } from "../../../../stores/typesStore";
 import { APIClassType } from "../../../../types/api";
 import sensitiveSort from "../extraSidebarComponent/utils/sensitive-sort";
+import isWrappedWithClass from "../PageComponent/utils/is-wrapped-with-class";
 import { CategoryGroup } from "./components/categoryGroup";
 import NoResultsMessage from "./components/emptySearchComponent";
 import MemoizedSidebarGroup from "./components/sidebarBundles";
 import SidebarMenuButtons from "./components/sidebarFooterButtons";
 import { SidebarHeaderComponent } from "./components/sidebarHeader";
-import SidebarItemsList from "./components/sidebarItemsList";
 import { applyBetaFilter } from "./helpers/apply-beta-filter";
 import { applyEdgeFilter } from "./helpers/apply-edge-filter";
 import { applyLegacyFilter } from "./helpers/apply-legacy-filter";
@@ -119,15 +108,6 @@ export function FlowSidebarComponent() {
     setFuse(new Fuse(fuseData, fuseOptions));
   }, [data]);
 
-  // Event handlers
-  const handleKeyDown = useCallback((event: KeyboardEvent) => {
-    if (event.key === "/") {
-      event.preventDefault();
-      searchInputRef.current?.focus();
-      setOpen(true);
-    }
-  }, []);
-
   const handleKeyDownInput = (
     e: React.KeyboardEvent<HTMLDivElement>,
     name: string,
@@ -142,11 +122,6 @@ export function FlowSidebarComponent() {
     }
   };
 
-  useEffect(() => {
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [handleKeyDown]);
-
   const [isInputFocused, setIsInputFocused] = useState(false);
   const searchInputRef = useRef<HTMLInputElement | null>(null);
 
@@ -165,12 +140,22 @@ export function FlowSidebarComponent() {
 
   const { setOpen } = useSidebar();
 
-  useHotkeys("/", (event) => {
+  const searchComponentsSidebar = useShortcutsStore(
-    event.preventDefault();
+    (state) => state.searchComponentsSidebar,
-    searchInputRef.current?.focus();
+  );
 
-    setOpen(true);
+  useHotkeys(
-  });
+    searchComponentsSidebar,
+    (e: KeyboardEvent) => {
+      if (isWrappedWithClass(e, "noflow")) return;
+      e.preventDefault();
+      searchInputRef.current?.focus();
+      setOpen(true);
+    },
+    {
+      preventDefault: true,
+    },
+  );
 
   useHotkeys(
     "esc",

src/frontend/src/stores/shortcuts.ts

@@ -34,6 +34,7 @@ export const useShortcutsStore = create<shortcutsStoreType>((set, get) => ({
   freezePath: "mod+shift+f",
   toolMode: "mod+shift+m",
   toggleSidebar: "mod+b",
+  searchComponentsSidebar: "/",
   updateUniqueShortcut: (name, combination) => {
     set({
       [name]: combination,

src/frontend/src/types/store/index.ts

@@ -38,6 +38,7 @@ export type shortcutsStoreType = {
   duplicate: string;
   componentShare: string;
   docs: string;
+  searchComponentsSidebar: string;
   changesSave: string;
   saveComponent: string;
   delete: string;