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 (