markus/finances
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases 6 Packages 1 Wiki Activity Actions

N-FIN-86: fix payor input loses focus on typing (#87)

Browse source 
Fixes #86
This commit is contained in:
Markus Thielker 2024-12-25 18:00:13 +01:00 • committed by GitHub
commit 583bc1aa5d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/components/form/paymentForm.tsx
View file

@ -69,6 +69,7 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
const payeeRef = useRef<HTMLInputElement>({} as HTMLInputElement); const payeeRef = useRef<HTMLInputElement>({} as HTMLInputElement);
const categoryRef = useRef<HTMLInputElement>({} as HTMLInputElement); const categoryRef = useRef<HTMLInputElement>({} as HTMLInputElement);
const submitRef = useRef<HTMLButtonElement>({} as HTMLButtonElement);
return ( return (
<Form {...form}> <Form {...form}>
@ -149,7 +150,9 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
{...field} {...field}
onChange={(e) => { onChange={(e) => {
field.onChange(e); field.onChange(e);
payeeRef && payeeRef.current.focus(); if (e && e.target.value) {
payeeRef && payeeRef.current.focus();
}
}}/> }}/>
</FormControl> </FormControl>
<FormMessage/> <FormMessage/>
@ -176,7 +179,7 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
// only focus category input if payee has no default category // only focus category input if payee has no default category
if (entity?.defaultCategoryId !== null) { if (entity?.defaultCategoryId !== null) {
form.setValue('categoryId', entity?.defaultCategoryId); form.setValue('categoryId', entity?.defaultCategoryId);
setTimeout(() => categoryRef.current.blur(), 0); submitRef && submitRef.current.focus();
} else { } else {
categoryRef && categoryRef.current.focus(); categoryRef && categoryRef.current.focus();
} }
@ -198,7 +201,14 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
<AutoCompleteInput <AutoCompleteInput
placeholder="Select category" placeholder="Select category"
items={categoriesMapped} items={categoriesMapped}
{...field} /> {...field}
onChange={(e) => {
field.onChange(e);
if (e && e.target.value) {
submitRef && submitRef.current.focus();
}
}}
/>
</FormControl> </FormControl>
<FormMessage/> <FormMessage/>
</FormItem> </FormItem>
@ -220,7 +230,8 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
)} )}
/> />
<Button type="submit" className="w-full">{value?.id ? 'Update Payment' : 'Create Payment'}</Button> <Button type="submit" ref={submitRef}
className="w-full">{value?.id ? 'Update Payment' : 'Create Payment'}</Button>
</form> </form>
</Form> </Form>
); );