react-final-form icon indicating copy to clipboard operation
react-final-form copied to clipboard

useFieldState() does not update state properly when used with react-admin and material-ui select

Open Niesyto opened this issue 5 years ago • 0 comments

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>
  );
}

Niesyto avatar Sep 01 '20 11:09 Niesyto