fix(docs): redo search focus code

packages/docs/src/components/layout/search/Search.tsx

@@ -77,7 +77,9 @@ const Search = ({ searchablePages }: SearchProps) => {
       <StyledIconButton onClick={handleOpen} color="inherit">
         <SearchIcon />
       </StyledIconButton>
-      <SearchModal open={open} onClose={handleClose} searchablePages={searchablePages} />
+      {open ? (
+        <SearchModal open={true} onClose={handleClose} searchablePages={searchablePages} />
+      ) : null}
     </>
   );
 };

packages/docs/src/components/layout/search/SearchModal.tsx

@@ -7,7 +7,7 @@ import { styled, useTheme } from '@mui/material/styles';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { useSearchScores } from '../../../util/search.util';
 import { isNotEmpty } from '../../../util/string.util';
@@ -84,24 +84,16 @@ const SearchModal: FC<SearchModalProps> = ({ open, onClose, searchablePages }) =
   const theme = useTheme();
   const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
 
-  const [canFocus, setCanFocus] = useState(true);
   const [search, setSearch] = useState('');
 
-  const handleFocus = useCallback(() => {
+  useEffect(() => {
-    if (canFocus && open && inputRef.current) {
+    setTimeout(() => {
       inputRef.current?.focus();
-      setSearch('');
+    });
-      setCanFocus(false);
+  }, []);
-    }
-  }, [canFocus, open]);
 
   const handleClose = useCallback(() => {
-    setTimeout(() => {
+    onClose();
-      onClose();
-      setTimeout(() => {
-        setCanFocus(true);
-      }, 100);
-    }, 100);
   }, [onClose]);
 
   const handleSearchChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
@@ -212,13 +204,7 @@ const SearchModal: FC<SearchModalProps> = ({ open, onClose, searchablePages }) =
   );
 
   return (
-    <StyledDialog
+    <StyledDialog open={open} onClose={handleClose} fullScreen={fullScreen} fullWidth>
-      open={open}
-      onClose={handleClose}
-      fullScreen={fullScreen}
-      fullWidth
-      onFocus={handleFocus}
-    >
       <StyledDialogContent>
         <StyledTextField
           autoFocus