gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(docs): redo search focus code

Browse Source
This commit is contained in:
Daniel Lautzenheiser 2023-01-24 07:19:32 -05:00
parent 1d769c15e9
commit b96678e544
No known key found for this signature in database
GPG Key ID: D2F75F7DD915527E
2 changed files with 10 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/docs/src/components/layout/search/Search.tsx
View File

@ -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}
</>
);
};

28
packages/docs/src/components/layout/search/SearchModal.tsx
View File

@ -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(() => {
if (canFocus && open && inputRef.current) {
useEffect(() => {
setTimeout(() => {
inputRef.current?.focus();
setSearch('');
setCanFocus(false);
}
}, [canFocus, open]);
});
}, []);
const handleClose = useCallback(() => {
setTimeout(() => {
onClose();
setTimeout(() => {
setCanFocus(true);
}, 100);
}, 100);
onClose();
}, [onClose]);
const handleSearchChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
@ -212,13 +204,7 @@ const SearchModal: FC<SearchModalProps> = ({ open, onClose, searchablePages }) =
);
return (
<StyledDialog
open={open}
onClose={handleClose}
fullScreen={fullScreen}
fullWidth
onFocus={handleFocus}
>
<StyledDialog open={open} onClose={handleClose} fullScreen={fullScreen} fullWidth>
<StyledDialogContent>
<StyledTextField
autoFocus