From 358a5c0ed9075ad6f6f10d514d30df934bfa72d6 Mon Sep 17 00:00:00 2001
From: ChasLui <chaslui@outlook.com>
Date: Wed, 21 Dec 2022 00:46:22 +0800
Subject: [PATCH] feat: press cmd+f to focus on the search bar (#800)

---
 web/src/components/SearchBar.tsx | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/web/src/components/SearchBar.tsx b/web/src/components/SearchBar.tsx
index 37a77a6a..547efbd2 100644
--- a/web/src/components/SearchBar.tsx
+++ b/web/src/components/SearchBar.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { useLocationStore } from "../store/module";
+import { useLocationStore, useDialogStore } from "../store/module";
 import { memoSpecialTypes } from "../helpers/filter";
 import Icon from "./Icon";
 import "../less/search-bar.less";
@@ -8,8 +8,31 @@ import "../less/search-bar.less";
 const SearchBar = () => {
   const { t } = useTranslation();
   const locationStore = useLocationStore();
+  const dialogStore = useDialogStore();
   const memoType = locationStore.state.query.type;
   const [queryText, setQueryText] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!inputRef.current) {
+        return;
+      }
+      if (dialogStore.getState().dialogStack.length) {
+        return;
+      }
+      const isMetaKey = event.ctrlKey || event.metaKey;
+      if (isMetaKey && event.key === "f") {
+        event.preventDefault();
+        inputRef.current.focus();
+        return;
+      }
+    };
+    document.body.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.body.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
 
   useEffect(() => {
     const text = locationStore.getState().query.text;
@@ -39,6 +62,7 @@ const SearchBar = () => {
           autoComplete="new-password"
           type="text"
           placeholder=""
+          ref={inputRef}
           value={queryText}
           onChange={handleTextQueryInput}
         />