react-admin icon indicating copy to clipboard operation
react-admin copied to clipboard

v4 alpha2 (upgrading old code): Conditional fields based on record are not possible to be rendered with SimpleShowLayout

Open afilp opened this issue 2 years ago • 1 comments

What you were expecting:

SimpleShowLayout to render fields conditionally on record props, as it used to do (the same code) in previous versions.

What happened instead:

It always renders these fields, actually their label only (their values seems to be empty). In the screenshot below, the Number of Seats should have not been rendered: image

Steps to reproduce:

Just read or try this code, the condition works but the <OurDependedFieldNumber/> is still rendered with the label, even if its calculated child is null. Seems like the ra code does not care of what this component renders, it just uses its props to show a field.

const OurDependedFieldNumber = ({ source, label, ourDependsOn, ourDependsOnValues }) => {
  const record = useRecordContext();
  if (!ourDependsOnValues.includes(record[ourDependsOn])) {
    return null;
  }
  return <NumberField source={source} label={label} />;
};

<Show>
    <SimpleShowLayout>
        <TextField label={window.labels.assetAadeCode} source="aadeCode" />
        <OurDependedFieldNumber
            source="seatsNumber"
            label="Number of Seats"
            ourDependsOn="subCat_id"
            ourDependsOnValues={[window.dbIds.seats]}
        />
    </SimpleShowLayout>
</Show>

Please note that if I rename the source, label props to source1, label1 props, then the Field is always not shown (no conditional too, but from the opposite side, not shown now). It seems that some blank space is rendered in that case: image

Related code: See above

Environment

React-admin version: "react-admin": "^4.0.0-alpha.2" Last version that did not exhibit the issue (if applicable): React version: "react": "^17.0.2" Browser: Stack trace (in case of a JS error):

afilp avatar Feb 14 '22 22:02 afilp

Hi, and thanks for your report.

This is the expected behavior in version 4, and the fix is documented here: https://github.com/marmelab/react-admin/blob/next/docs/Fields.md#hiding-a-field-based-on-the-value-of-another

But we probably need to add a section to the upgrade guide about it, so I'm marking it as a documentation bug.

fzaninotto avatar Feb 15 '22 07:02 fzaninotto

This is properly documented, so I'm closing this issue.

fzaninotto avatar Aug 10 '23 10:08 fzaninotto