feat: search auto focus

Author: Mygod

src/features/search/index.jsx

@@ -68,7 +68,6 @@ const STATIC_PROPS =
     },
     PopperComponent,
     onChange: handleChange,
-    renderInput,
     renderOption,
     autoComplete: false,
     clearOnBlur: false,
@@ -83,18 +82,41 @@ export function Search() {
 
   const { t } = useTranslation()
 
+  /** @type {React.MutableRefObject<HTMLInputElement | null>} */
+  const inputRef = React.useRef(null)
+
   const search = useStorage((s) => s.search)
   const isMobile = useMemory((s) => s.isMobile)
   const open = useLayoutStore((s) => s.search)
 
   const { loading, options, handleInputChange } = useSendSearch(search, open)
 
+  const handleDialogEntered = React.useCallback(() => {
+    if (inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [])
+
+  React.useEffect(() => {
+    if (!open) {
+      return undefined
+    }
+    const frame = requestAnimationFrame(() => {
+      if (inputRef.current) {
+        inputRef.current.focus()
+      }
+    })
+    return () => cancelAnimationFrame(frame)
+  }, [open])
+
   return (
     <Dialog
       fullScreen={isMobile}
       open={open}
       onClose={handleClose}
+      disableAutoFocus
       sx={DIALOG_SX}
+      TransitionProps={{ onEntered: handleDialogEntered }}
     >
       <Box width={BOX_WIDTH}>
         <Header titles="search" action={handleClose} />
@@ -106,6 +128,7 @@ export function Search() {
           loading={loading}
           loadingText={t('searching')}
           noOptionsText={t('no_options')}
+          renderInput={(params) => renderInput(params, inputRef)}
           {...STATIC_PROPS}
         />
       </Box>

src/features/search/renderInput.jsx

@@ -70,8 +70,11 @@ const EndAdornment = React.memo(
   },
 )
 
-/** @param {import('@mui/material').AutocompleteRenderInputParams} props */
-export function renderInput({ InputProps, ...props }) {
+/**
+ * @param {import('@mui/material').AutocompleteRenderInputParams} props
+ * @param {React.MutableRefObject<HTMLInputElement | null>} [inputRef]
+ */
+export function renderInput({ InputProps, ...props }, inputRef) {
   const { t } = useTranslation()
 
   const searchTab = useStorage((s) => s.searchTab)
@@ -98,11 +101,24 @@ export function renderInput({ InputProps, ...props }) {
     }
   }, [searchTab, data])
 
+  const handleInputRef = (node) => {
+    const { ref } = props.inputProps
+    if (typeof ref === 'function') {
+      ref(node)
+    } else if (ref && typeof ref === 'object') {
+      ref.current = node
+    }
+    if (inputRef) {
+      inputRef.current = node
+    }
+  }
+
   return (
     <>
       <TextField
         placeholder={t(`global_search_${searchTab}`)}
         variant="standard"
+        inputRef={handleInputRef}
         {...props}
         InputProps={{
           ...InputProps,