ReferenceManyField breaks when wrapped in simple layout components

[dustin-rcg]

What you were expecting:
I can wrap a ReferenceManyField component inside layout components such as div or Material UI Grid and it will continue to work.

What happened instead:
React Admin displays the "Something went wrong" page and the details show:

TypeError: Cannot read property 'replace' of undefined

in ReferenceManyField (at investment.js:509)
in div (at investment.js:506)
in div (created by FormInput)
in FormInput (created by SimpleFormView)
in div (created by ForwardRef(CardContent))
in ForwardRef(CardContent) (created by WithStyles(ForwardRef(CardContent)))
in WithStyles(ForwardRef(CardContent)) (created by CardContentInner)
in CardContentInner (created by SimpleFormView)
in form (created by SimpleFormView)

...

Steps to reproduce:
View the codesandbox: https://codesandbox.io/s/gallant-rain-jbuu6
Select an animal from the list to go to the edit form. Everything displays OK.
Now open the animal.js file and uncomment the div tags on lines 39 and 54, surrounding the ReferenceManyField component, and save the file. Then the page displays the error I describe. Codesandbox has a bug that prevents it from showing the actual error. You can run the example locally to see it.

Related code:
https://codesandbox.io/s/gallant-rain-jbuu6

Environment

• React-admin version: 3.0.4
• Last version that did not exhibit the issue (if applicable): N/A
• React version: 16.12.0
• Browser: Google Chrome Version 78.0.3904.108 (Official Build) (64-bit)
• Stack trace (in case of a JS error): N/A

[fzaninotto]

SimpleForm expects Input components as children. If you pass other elements than an Input, unexpected things will happen. For complex form layouts, replace Simpleform by your own component.

[dustin-rcg]

@fzaninotto I guess you mean SimpleForm expects Inputs or Fields as children, since the RA site contains examples with ReferenceManyField as a child of SimpleForm.

[dustin-rcg]

For anyone else who might run into this issue, I seem to be having luck with wrapping things in FormDataConsumer.. That seems to be properly dealing with inputs and fields nested inside div and Grid. Haven't had to write my own Form component yet, thankfully.