Merge pull request #206 from uselagoon/searchbar-focus

uselagoon · Dec 12, 2023 · 8cff175 · 8cff175
2 parents 0d321bb + a37e06e
commit 8cff175
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/src/components/Projects/index.js b/src/components/Projects/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import Highlighter from 'react-highlight-words';
 
 import Box from 'components/Box';
@@ -19,6 +19,13 @@ import {
 const Projects = ({ projects = [], initialSearch }) => {
   const [searchInput, setSearchInput] = useState(initialSearch);
 
+  const searchInputRef = useRef(null);
+
+  useEffect(() => {
+    if (initialSearch && searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }, []);
   const filteredProjects = projects.filter(key => {
     const sortByName = key.name.toLowerCase().includes(searchInput.trim().toLowerCase());
     let sortByUrl = '';
@@ -38,6 +45,7 @@ const Projects = ({ projects = [], initialSearch }) => {
         </label>
         <label></label>
         <SearchInput
+          ref={searchInputRef}
           aria-labelledby="search"
           className="searchInput"
           type="text"