React-admin: The default value of an ArrayInput doesn't work with a SimpleFormIterator

[Kmaschta]

What you were expecting:
I want to have a default value for an ArrayInput with a SimpleFormIterator as a child.

What happened instead:
The input isn't populated as expected and stay empty.

Steps to reproduce:

1. Have an ArrayInput with a SimpleFormIterator as a child
2. Set the prop defaultValue with a correct format

Related code:

See the first input in src/posts/PostCreate.js file within the following Code Sandbox:
https://codesandbox.io/s/1wqxkv6pml

The code is the following:

<ArrayInput
    source="backlinks"
    defautltValue={[
        { date: "2012-08-09T00:00:00.000Z", url: "http://example.com/bar/baz.html" }
    ]}
>
    <SimpleFormIterator>
        <DateInput source="date" />
        <TextInput source="url" />
    </SimpleFormIterator>
</ArrayInput>

Other information:
Related question on SO: https://stackoverflow.com/questions/51425225/arrayinput-how-to-set-default-value

Environment

• React-admin version: from 2.0.2 to 2.1.2 at least
• React version: 16.3.1
• Browser: Chrome

[fzaninotto]

Fixed by #2067

[Kmaschta]

I can confirm that the issue is resolved with the 2.2.0 release, as shown by the following sandbox (go to Posts > Create)

https://codesandbox.io/s/4z383v368x

Thanks !

[RafeSacks]

Did this regress? It doesn't work for me with react-admin 2.8.5 and the codesandbox in the last reply doesn't work for me either. The code in my <Edit /> looks like:

          <ArrayInput
            source="services"
            defaultValue={[{ service: "", quantity: 1 }]}
          >
            <SimpleFormIterator>
              <ReferenceInput source="service" label="Service" reference="services" >
                <SelectInput optionText="name" />
              </ReferenceInput>
              <NumberInput source="quantity" label="Quantity" />
            </SimpleFormIterator>
          </ArrayInput>

[Update:] Just wanted to add that this is working for me with this exact same code in <Create />. I can't test in our production app any more because this field never needs a default as the API requires it to be there. If now one else can repro, please ignore.

[keulu-ing]

I have the same problem. DefaultValues work on create Controller but not on the Edit Controller. I'm on 2.8.5 too.

I don't think that's a regression, because it doesn't work on Kmaschta codesandebox with react admin v2.2

[afilp]

@Kmaschta @fzaninotto I also believe there is a bug here, in my case I get hundreds of re-rerenderings and the app crashes with the following errors:

Uncaught Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Note: Not sure if this is the reason, I have the ArrayInput in the return function of a Query, could this cause any problems? If I comments out the defaultValue everything works as expected, but when I include it then I get the above errors (which make the app halt).

[gokberkakdeniz]

@afilp I have same problem on v3.7.2. I just want to show 4 blank inputs on load.

<ArrayInput
  variant={formProps.variant}
  source="Area"
  validate={[
    required(),
    minLength(4, "pi.customers.error.insufficientPoint"),
    firstAndLastEqual(
      "pi.customers.error.firstAndLastPointAreNotEqual"
    ),
  ]}
  // defaultValue={Array(4)}
  // defaultValue={Array(4).map(() => ({
  //   Latitude: 0,
  //   Longitude: 0,
  //   Address: "",
  // }))}
  label={translate("pi.customers.area")}
  fullWidth
>

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
    in ArrayInput (at CustomerForm.js:86)
    in div (created by Styled(MuiBox))
    in Styled(MuiBox) (at CustomerForm.js:82)
    in div (created by Styled(MuiBox))
    in Styled(MuiBox) (at CustomerForm.js:25)
    in form (at CustomerForm.js:24)
    in FormView (created by ReactFinalForm)
    in ReactFinalForm (created by FormWithRedirect)
    in FormWithRedirect (at CustomerForm.js:21)
    in CustomerForm (at CustomerCreate.js:26)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Card))
    in ForwardRef(Card) (created by WithStyles(ForwardRef(Card)))
    in WithStyles(ForwardRef(Card)) (created by CreateView)
    in div (created by CreateView)
    in div (created by CreateView)
    in CreateView (created by Create)
    in Create (at CustomerCreate.js:21)
    in CustomerCreate (created by WithPermissions)
    in WithPermissions (created by Context.Consumer)
    in Route (created by ResourceRoutes)
    in Switch (created by ResourceRoutes)
    in ResourceRoutes (created by Resource)
    in Resource (at App.js:32)
    in Route (created by RoutesWithLayout)
    in Switch (created by RoutesWithLayout)
    in RoutesWithLayout (created by Context.Consumer)
    in div (created by Layout)
    in main (created by Layout)
    in div (created by Layout)
    in div (created by Layout)
    in Layout (created by WithStyles(Layout))
    in WithStyles(Layout) (created by Context.Consumer)
    in withRouter(WithStyles(Layout)) (created by ConnectFunction)
    in ConnectFunction (created by LayoutWithTheme)
    in ThemeProvider (created by LayoutWithTheme)
    in LayoutWithTheme (created by Context.Consumer)
    in Route (created by CoreAdminRouter)
    in Switch (created by CoreAdminRouter)
    in div (created by CoreAdminRouter)
    in CoreAdminRouter (created by Context.Consumer)
    in Route (created by CoreAdminUI)
    in Switch (created by CoreAdminUI)
    in CoreAdminUI (created by AdminUI)
    in AdminUI (created by Admin)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by ConnectFunction)
    in ConnectFunction (created by CoreAdminContext)
    in TranslationProvider (created by CoreAdminContext)
    in Provider (created by CoreAdminContext)
    in CoreAdminContext (created by AdminContext)
    in AdminContext (created by Admin)
    in Admin (at App.js:20)
    in App (at src/index.js:14)