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 categoryRef = useRef<HTMLInputElement>({} as HTMLInputElement);
const submitRef = useRef<HTMLButtonElement>({} as HTMLButtonElement);
return (
<Form {...form}>
@ -149,7 +150,9 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
{...field}
onChange={(e) => {
field.onChange(e);
payeeRef && payeeRef.current.focus();
if (e && e.target.value) {
payeeRef && payeeRef.current.focus();
}
}}/>
</FormControl>
<FormMessage/>
@ -176,7 +179,7 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
// only focus category input if payee has no default category
if (entity?.defaultCategoryId !== null) {
form.setValue('categoryId', entity?.defaultCategoryId);
setTimeout(() => categoryRef.current.blur(), 0);
submitRef && submitRef.current.focus();
} else {
categoryRef && categoryRef.current.focus();
}
@ -198,7 +201,14 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
<AutoCompleteInput
placeholder="Select category"
items={categoriesMapped}
{...field} />
{...field}
onChange={(e) => {
field.onChange(e);
if (e && e.target.value) {
submitRef && submitRef.current.focus();
}
}}
/>
</FormControl>
<FormMessage/>
</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>
);