Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Autofocus search when opening; closes #2522

Browse source
This commit is contained in:
Dane Everitt 2020-10-15 20:09:13 -07:00
parent 5eda27933f
commit 9726a0de46
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
1 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
resources/scripts/components/dashboard/search/SearchModal.tsx
View file

@ -63,22 +63,24 @@ export default ({ ...props }: Props) => {
console.error(error);
addError({ key: 'search', message: httpErrorToHuman(error) });
})
.then(() => setLoading(false));
.then(() => setLoading(false))
.then(() => ref.current?.focus());
}, 500);
useEffect(() => {
if (props.visible) {
setTimeout(() => ref.current?.focus(), 250);
if (ref.current) ref.current.focus();
}
}, [ props.visible ]);
// Formik does not support an innerRef on custom components.
const InputWithRef = (props: any) => <Input {...props} ref={ref}/>;
return (
<Formik
onSubmit={search}
validationSchema={object().shape({
term: string()
.min(3, 'Please enter at least three characters to begin searching.')
.required('A search term must be provided.'),
term: string().min(3, 'Please enter at least three characters to begin searching.'),
})}
initialValues={{ term: '' } as Values}
>
@ -95,7 +97,7 @@ export default ({ ...props }: Props) => {
>
<SearchWatcher/>
<InputSpinner visible={loading}>
<Field as={Input} innerRef={ref} name={'term'}/>
<Field as={InputWithRef} name={'term'}/>
</InputSpinner>
</FormikFieldWrapper>
</Form>