[Feature Request] Keyboard Shortcut & Search Improvements #449

added ctrl+k to focus the search bar
added escape to delete the input of the search bar
fixed behavior of ctrl+e on windows, which would otherwise focus the chrome searchbar

apps/web/components/dashboard/bookmarks/EditorCard.tsx

@@ -31,6 +31,7 @@ function useFocusOnKeyPress(inputRef: React.RefObject<HTMLTextAreaElement>) {
       }
       if ((e.metaKey || e.ctrlKey) && e.code === "KeyE") {
         inputRef.current.focus();
+        e.preventDefault();
       }
     }
 

apps/web/components/dashboard/search/SearchInput.tsx

@@ -1,9 +1,36 @@
 "use client";
 
-import React, { useEffect } from "react";
+import React, { useEffect, useImperativeHandle, useRef } from "react";
 import { Input } from "@/components/ui/input";
 import { useDoBookmarkSearch } from "@/lib/hooks/bookmark-search";
 
+function useFocusSearchOnKeyPress(inputRef: React.RefObject<HTMLInputElement>) {
+  useEffect(() => {
+    function handleKeyPress(e: KeyboardEvent) {
+      if (!inputRef.current) {
+        return;
+      }
+      if ((e.metaKey || e.ctrlKey) && e.code === "KeyK") {
+        e.preventDefault();
+        inputRef.current.focus();
+        // Move the cursor to the end of the input field, so you can continue typing
+        const length = inputRef.current.value.length;
+        inputRef.current.setSelectionRange(length, length);
+      }
+      if (e.code === "Escape") {
+        e.preventDefault();
+        inputRef.current.blur();
+        inputRef.current.value = "";
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyPress);
+    return () => {
+      document.removeEventListener("keydown", handleKeyPress);
+    };
+  }, [inputRef]);
+}
+
 const SearchInput = React.forwardRef<
   HTMLInputElement,
   React.HTMLAttributes<HTMLInputElement> & { loading?: boolean }
@@ -12,6 +39,10 @@ const SearchInput = React.forwardRef<
 
   const [value, setValue] = React.useState(searchQuery);
 
+  const inputRef = useRef<HTMLInputElement>(null);
+  useFocusSearchOnKeyPress(inputRef);
+  useImperativeHandle(ref, () => inputRef.current!);
+
   useEffect(() => {
     if (!isInSearchPage) {
       setValue("");
@@ -25,7 +56,7 @@ const SearchInput = React.forwardRef<
 
   return (
     <Input
-      ref={ref}
+      ref={inputRef}
       value={value}
       onChange={onChange}
       placeholder="Search"