diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index 9c5fd76..4ec41bc 100644
--- 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">