diff --git a/src/components/form/paymentForm.tsx b/src/components/form/paymentForm.tsx index 705587e..5e9c44d 100644 --- a/src/components/form/paymentForm.tsx +++ b/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); + } + } + }}/> diff --git a/src/components/ui/auto-complete-input.tsx b/src/components/ui/auto-complete-input.tsx index 29363e6..1119e74 100644 --- a/src/components/ui/auto-complete-input.tsx +++ b/src/components/ui/auto-complete-input.tsx @@ -13,12 +13,12 @@ export interface AutoCompleteInputProps const AutoCompleteInput = React.forwardRef( ({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 { + console.log('Prop value changed', value, props.value); + if (props.value) { + setValue(getNameOfPropValue()); + } else { + setValue(''); + } + }, [props.value]); + return (