From 65850dfd03764bf70b894eed1d1a64a771e58d18 Mon Sep 17 00:00:00 2001
From: Jason Chen <3380894+jas0ncn@users.noreply.github.com>
Date: Wed, 8 Mar 2023 08:02:51 +0800
Subject: [PATCH] feat: auto focus search bar when sidebar is shown (close
 #1269) (#1304)

feat: auto focus search bar when sidebar is shown
---
 web/src/components/HomeSidebar.tsx | 4 ++++
 web/src/components/SearchBar.tsx   | 1 +
 2 files changed, 5 insertions(+)

diff --git a/web/src/components/HomeSidebar.tsx b/web/src/components/HomeSidebar.tsx
index ef2c78a6..1b655edb 100644
--- a/web/src/components/HomeSidebar.tsx
+++ b/web/src/components/HomeSidebar.tsx
@@ -32,6 +32,10 @@ export const toggleHomeSidebar = (show?: boolean) => {
   if (show) {
     sidebarEl.classList.add("show");
     maskEl.classList.add("show");
+
+    // auto focus search bar when sidebar is shown
+    const inputEl = sidebarEl.querySelector("#mobile-search-bar") as HTMLInputElement;
+    inputEl?.focus();
   } else {
     sidebarEl.classList.remove("show");
     maskEl.classList.remove("show");
diff --git a/web/src/components/SearchBar.tsx b/web/src/components/SearchBar.tsx
index 830c41e4..d8be5e05 100644
--- a/web/src/components/SearchBar.tsx
+++ b/web/src/components/SearchBar.tsx
@@ -54,6 +54,7 @@ const SearchBar = () => {
       <input
         className="flex ml-2 w-24 grow text-sm outline-none bg-transparent dark:text-gray-200"
         type="text"
+        id="mobile-search-bar"
         placeholder="Search memos"
         ref={inputRef}
         value={queryText}