N-FIN-42: set default category when payee is selected

src/components/form/paymentForm.tsx

@@ -166,7 +166,17 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
                                         placeholder="Select payee"
                                         items={entitiesMapped}
                                         next={categoryRef}
-                                        {...field} />
+                                        {...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);
+                                                if (entity?.defaultCategoryId !== null) {
+                                                    form.setValue('categoryId', entity?.defaultCategoryId);
+                                                }
+                                            }
+                                        }}/>
                                 </FormControl>
                                 <FormMessage/>
                             </FormItem>

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

@@ -13,12 +13,12 @@ export interface AutoCompleteInputProps
 const AutoCompleteInput = React.forwardRef<HTMLInputElement, AutoCompleteInputProps>(
     ({className, type, ...props}, ref) => {
 
-        const [value, setValue] = useState(getInitialValue());
+        const [value, setValue] = useState(getNameOfPropValue());
         const [open, setOpen] = useState(false);
         const [lastKey, setLastKey] = useState('');
         const [filteredItems, setFilteredItems] = useState(props.items);
 
-        function getInitialValue() {
+        function getNameOfPropValue() {
 
             if (!props.items) {
                 return '';
@@ -50,6 +50,15 @@ const AutoCompleteInput = React.forwardRef<HTMLInputElement, AutoCompleteInputPr
             }
         }, [filteredItems]);
 
+        useEffect(() => {
+            console.log('Prop value changed', value, props.value);
+            if (props.value) {
+                setValue(getNameOfPropValue());
+            } else {
+                setValue('');
+            }
+        }, [props.value]);
+
         return (
             <div className="relative">
                 <input