memoize hotkeys for global search

appsmithorg · Feb 25, 2025 · fbc9fc1 · fbc9fc1
1 parent fd288d0
commit fbc9fc1
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 38 deletions.
diff --git a/app/client/src/components/editorComponents/GlobalSearch/GlobalSearchHotKeys.tsx b/app/client/src/components/editorComponents/GlobalSearch/GlobalSearchHotKeys.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { useHotkeys, type HotkeyConfig } from "@blueprintjs/core";
 import type { SearchItem, SelectEvent } from "./utils";
 
@@ -22,44 +22,48 @@ const GlobalSearchHotKeys: React.FC<Props> = ({
   handleUpKey,
   modalOpen,
 }) => {
-  const hotkeys: HotkeyConfig[] = [
-    {
-      combo: "up",
-      onKeyDown: handleUpKey,
-      hideWhenModalClosed: true,
-      allowInInput: true,
-      group: "Omnibar",
-      label: "Move up the list",
-      global: false,
-    },
-    {
-      combo: "down",
-      onKeyDown: handleDownKey,
-      hideWhenModalClosed: true,
-      allowInInput: true,
-      group: "Omnibar",
-      label: "Move down the list",
-      global: false,
-    },
-    {
-      combo: "return",
-      onKeyDown: (event: KeyboardEvent) => {
-        // TODO: Fix this the next time the file is edited
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const activeElement = document.activeElement as any;
+  const hotkeys: HotkeyConfig[] = useMemo(
+    () =>
+      [
+        {
+          combo: "up",
+          onKeyDown: handleUpKey,
+          hideWhenModalClosed: true,
+          allowInInput: true,
+          group: "Omnibar",
+          label: "Move up the list",
+          global: false,
+        },
+        {
+          combo: "down",
+          onKeyDown: handleDownKey,
+          hideWhenModalClosed: true,
+          allowInInput: true,
+          group: "Omnibar",
+          label: "Move down the list",
+          global: false,
+        },
+        {
+          combo: "return",
+          onKeyDown: (event: KeyboardEvent) => {
+            // TODO: Fix this the next time the file is edited
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const activeElement = document.activeElement as any;
 
-        activeElement?.blur(); // scroll into view doesn't work with the search input focused
-        handleItemLinkClick(event, null, "ENTER_KEY");
-      },
-      hideWhenModalClosed: true,
-      allowInInput: true,
-      group: "Omnibar",
-      label: "Navigate",
-      global: false,
-    },
-  ].filter(
-    ({ hideWhenModalClosed }) =>
-      !hideWhenModalClosed || (hideWhenModalClosed && modalOpen),
+            activeElement?.blur(); // scroll into view doesn't work with the search input focused
+            handleItemLinkClick(event, null, "ENTER_KEY");
+          },
+          hideWhenModalClosed: true,
+          allowInInput: true,
+          group: "Omnibar",
+          label: "Navigate",
+          global: false,
+        },
+      ].filter(
+        ({ hideWhenModalClosed }) =>
+          !hideWhenModalClosed || (hideWhenModalClosed && modalOpen),
+      ),
+    [handleUpKey, handleDownKey, handleItemLinkClick, modalOpen],
   );
 
   const { handleKeyDown, handleKeyUp } = useHotkeys(hotkeys);

diff --git a/app/client/src/pages/Editor/JSEditor/JSObjectHotKeys.tsx b/app/client/src/pages/Editor/JSEditor/JSObjectHotKeys.tsx
@@ -15,6 +15,7 @@ function JSObjectHotKeys({ children, runActiveJSFunction }: Props) {
         global: true,
         label: "Run Js Function",
         onKeyDown: runActiveJSFunction,
+        allowInInput: true,
       },
     ],
     [runActiveJSFunction],