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

N-FIN-86: focus submit button after last input filled

Browse source
This commit is contained in:
Markus Thielker 2024-12-25 17:59:09 +01:00
parent ed49ad4ce7
commit 5d8554068c
No known key found for this signature in database
1 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -179,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();
} }
@ -201,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>
@ -223,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>
); );