From 5d8554068c8dbe4f68aa2ac68ed547ba67ff6edd Mon Sep 17 00:00:00 2001
From: Markus Thielker <mail.markus.thielker@gmail.com>
Date: Wed, 25 Dec 2024 17:59:09 +0100
Subject: [PATCH] N-FIN-86: focus submit button after last input filled

---
 src/components/form/paymentForm.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/form/paymentForm.tsx b/src/components/form/paymentForm.tsx
index 87bacb1..3963d75 100644
--- a/src/components/form/paymentForm.tsx
+++ b/src/components/form/paymentForm.tsx
@@ -179,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();
                                                 }
@@ -201,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>
@@ -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>
     );