fix: focus search input on mount (#414)

satnaing · Dec 29, 2024 · 63fe796 · 63fe796
1 parent 397e321
commit 63fe796
Showing 1 changed file with 7 additions and 0 deletions.
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
@@ -73,6 +73,13 @@ export default function SearchBar({ searchList }: Props) {
     }
   }, [inputVal]);
 
+  useEffect(() => {
+    // focus on text input when search bar is displayed
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [inputVal]);
+
   return (
     <>
       <label className="relative block">