N-FIN-67: refactor system to focus next form node (#85)

Resolves #67

src/components/form/paymentForm.tsx

@@ -67,9 +67,8 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
         };
     }) ?? [];
 
-    const payeeRef = useRef<HTMLInputElement>(null);
+    const payeeRef = useRef<HTMLInputElement>({} as HTMLInputElement);
-    const categoryRef = useRef<HTMLInputElement>(null);
+    const categoryRef = useRef<HTMLInputElement>({} as HTMLInputElement);
-    const noteRef = useRef<HTMLInputElement>(null);
 
     return (
         <Form {...form}>
@@ -147,8 +146,11 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
                                     <AutoCompleteInput
                                         placeholder="Select payor"
                                         items={entitiesMapped}
-                                        next={payeeRef}
+                                        {...field}
-                                        {...field} />
+                                        onChange={(e) => {
+                                            field.onChange(e);
+                                            payeeRef && payeeRef.current.focus();
+                                        }}/>
                                 </FormControl>
                                 <FormMessage/>
                             </FormItem>
@@ -165,15 +167,18 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
                                     <AutoCompleteInput
                                         placeholder="Select payee"
                                         items={entitiesMapped}
-                                        next={categoryRef}
                                         {...field}
                                         onChange={(e) => {
                                             field.onChange(e);
                                             if (e && e.target.value) {
                                                 const entity = entities.find((entity) => entity.id === Number(e.target.value));
-                                                console.log(entity?.defaultCategoryId);
+
+                                                // only focus category input if payee has no default category
                                                 if (entity?.defaultCategoryId !== null) {
                                                     form.setValue('categoryId', entity?.defaultCategoryId);
+                                                    setTimeout(() => categoryRef.current.blur(), 0);
+                                                } else {
+                                                    categoryRef && categoryRef.current.focus();
                                                 }
                                             }
                                         }}/>
@@ -193,7 +198,6 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
                                     <AutoCompleteInput
                                         placeholder="Select category"
                                         items={categoriesMapped}
-                                        next={noteRef}
                                         {...field} />
                                 </FormControl>
                                 <FormMessage/>

src/components/ui/auto-complete-input.tsx

@@ -9,7 +9,6 @@ import { Button } from '@/components/ui/button';
 export interface AutoCompleteInputProps
     extends React.InputHTMLAttributes<HTMLInputElement> {
     items: { label: string, value: any }[];
-    next?: React.RefObject<HTMLInputElement>;
 }
 
 const AutoCompleteInput = React.forwardRef<HTMLInputElement, AutoCompleteInputProps>(
@@ -32,7 +31,6 @@ const AutoCompleteInput = React.forwardRef<HTMLInputElement, AutoCompleteInputPr
 
         function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
 
-            props.onChange?.(undefined as any);
             const value = e.target.value;
 
             setFilteredItems(props?.items?.filter((item) => {
@@ -41,19 +39,26 @@ const AutoCompleteInput = React.forwardRef<HTMLInputElement, AutoCompleteInputPr
 
             setValue(value);
             setOpen(value.length > 0);
+
+            // on typing only the internal state is changed while the form state is
+            // set to undefined. This way only the predefined items are actual values
+            // for the form validation
+            props.onChange?.(undefined as any);
         }
 
+        // since typing changes the internal values and therefor the selected value, this effect
+        // handles every filteredItems change to check if only one item is left
         useEffect(() => {
+            // only one item is left and the last character was a letter or digit.
+            // the last condition has to be checked to make it possible to use the backspace
             if (filteredItems.length === 1 && /^[a-zA-Z0-9]$/.test(lastKey)) {
                 setValue(filteredItems[0].label);
                 setOpen(false);
                 props.onChange?.({target: {value: filteredItems[0].value}} as any);
-                props.next && props.next.current?.focus();
             }
         }, [filteredItems]);
 
         useEffect(() => {
-            console.log('Prop value changed', value, props.value);
             if (props.value) {
                 setValue(getNameOfPropValue());
             } else {
@@ -105,7 +110,6 @@ const AutoCompleteInput = React.forwardRef<HTMLInputElement, AutoCompleteInputPr
                                     className="px-3 py-3 hover:bg-accent hover:text-accent-foreground cursor-pointer text-sm font-medium"
                                     onClick={() => {
                                         props.onChange?.({target: {value: item.value}} as any);
-                                        props.next && props.next.current?.focus();
                                         setValue(item.label);
                                         setOpen(false);
                                     }}