From bbb616f56c23a612e833d74c1b8c0335fabbfa49 Mon Sep 17 00:00:00 2001
From: Charles Bachmeier <charles@bachmeier.io>
Date: Wed, 31 Aug 2022 10:33:51 -0700
Subject: [PATCH] feat: auto set cursor on searchbar opening (#4552)

* auto set cursor on searchbar opening

* comment update

Co-authored-by: Charlie <charlie@uniswap.org>
---
 src/components/NavBar/SearchBar.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/NavBar/SearchBar.tsx b/src/components/NavBar/SearchBar.tsx
index a8013e787d..3c84f6ad9b 100644
--- a/src/components/NavBar/SearchBar.tsx
+++ b/src/components/NavBar/SearchBar.tsx
@@ -269,6 +269,7 @@ export const SearchBar = () => {
   const [searchValue, setSearchValue] = useState('')
   const debouncedSearchValue = useDebounce(searchValue, 300)
   const searchRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
   const { pathname } = useLocation()
   const phase1Flag = useNftFlag()
   const isMobile = useIsMobile()
@@ -321,6 +322,13 @@ export const SearchBar = () => {
     setSearchValue('')
   }, [pathname])
 
+  // auto set cursor when searchbar is opened
+  useEffect(() => {
+    if (isOpen) {
+      inputRef.current?.focus()
+    }
+  }, [isOpen])
+
   const placeholderText = phase1Flag === NftVariant.Enabled ? t`Search tokens and NFT collections` : t`Search tokens`
 
   return (
@@ -359,6 +367,7 @@ export const SearchBar = () => {
             }}
             className={styles.searchBarInput}
             value={searchValue}
+            ref={inputRef}
           />
         </Row>
         <Box display={{ sm: isOpen ? 'none' : 'flex', xl: 'none' }}>