Using a ReferenceField in a Form does not display the field name

[clement-escolano]

What you were expecting:
When using a ReferenceField inside a SimpleForm inside an Edit, I expect the same behaviour as in the Show layout.

What happened instead:
There is no field name and there are other styling issues.

Steps to reproduce:
In a SimpleForm component inside an Edit, use a ReferenceField with a TextField to display a value (with no possibility to edit).

Related code:

Code here: https://codesandbox.io/s/sad-brahmagupta-rsyv8z?file=/src/comments/CommentEdit.tsx

In the SimpleForm (line 135) of the file src/comments/CommentEdit.tsx, there is this field:

              <ReferenceField source="post_id" reference="posts">
                <TextField source="title" />
              </ReferenceField>

Other information:
It used to work in the v3.

Environment

• React-admin version: 4.4.3
• Last version that did not exhibit the issue (if applicable): 3.19.11
• React version: 17
• Browser: Firefox
• Stack trace (in case of a JS error): N/A

[fzaninotto]

This is not a bug. In react-admin v4, if you want to use Fields as children of SimpleForm, you must wrap them with a Labeled.

https://marmelab.com/react-admin/SimpleForm.html#using-fields-as-children

I agree that this should probably be mentioned in the upgrade guide, though.

[clement-escolano]

It works thank you :-)
Do you want me to open a pull request to add it in the upgrade guide?

[fzaninotto]

That would be great!

[clement-escolano]

Done :-)