react-final-form
react-final-form copied to clipboard
useFieldState() does not update state properly when used with react-admin and material-ui select
bug report
What is the current behavior?
useFieldState() does not trigger when tracked select field changes from selected item 1 to selected item 2. Works only when you change it from or to first item (0)
export default function ItemInput() {
const form = useForm("itemType");
return (
<ReferenceInput
label="Item"
reference="Item"
source="item.id"
onChange={() => form.change("attachmentsIds", undefined)}
filter={{ type: form.getFieldState("itemType")?.value }}
>
<AutocompleteInput source="name" />
</ReferenceInput>
);
}
What is the expected behavior?
I expected it to change filter every time when field called itemType changes it's state. itemType is a react-admin SelectField component, which is just material-ui Select with some data fetching and react-final-form to connect it to the form.
What's your environment?
"@material-ui/core": "^4.11.0",
"ra-data-graphql-simple": "^3.8.0",
"react": "^16.13.1",
"react-admin": "^3.7.2",
"react-dom": "^16.13.1",
"react-final-form": "^6.5.1",
Other information
Component works perfectly well when changed to:
export default function ItemInput() {
const form = useForm();
const field = useField("itemType");
console.log(field.input?.value);
return (
<ReferenceInput
label="Item"
reference="Item"
source="item.id"
onChange={() => form.change("attachmentsIds", undefined)}
filter={{ type: field.input?.value }}
>
<AutocompleteInput source="name" />
</ReferenceInput>
);
}