set focus to input

balancer · Jan 16, 2025 · be25a5a · be25a5a
1 parent 3c56aae
commit be25a5a
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/packages/lib/shared/components/inputs/SearchInput.tsx b/packages/lib/shared/components/inputs/SearchInput.tsx
@@ -3,6 +3,7 @@ import { useForm } from 'react-hook-form'
 import { useDebounce } from '@repo/lib/shared/hooks/useDebounce'
 import { defaultDebounceMs } from '@repo/lib/shared/utils/queries'
 import { Search, X } from 'react-feather'
+import { useEffect } from 'react'
 
 interface SearchInputProps {
   search: string | null
@@ -22,14 +23,19 @@ export function SearchInput({
   isLoading,
   ...rest
 }: SearchInputProps & InputProps) {
-  const { register, setValue, getFieldState } = useForm()
+  const { register, setValue, getFieldState, setFocus } = useForm()
 
   const changeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearch(event.target.value)
   }
 
   const debouncedChangeHandler = useDebounce(changeHandler, defaultDebounceMs)
 
+  useEffect(() => {
+    setFocus(SEARCH)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   return (
     <InputGroup size="md">
       <Input