Infinite loop if initialValue is defined in a SelectArrayInput which is integrated in a formdataconsumer

[nicodmf]

What you were expecting: Defined initial values for SelectArrayInput in a FormDataConsumer and have a working environment

What happened instead: An infinite loop take place and stop application.

Steps to reproduce:

• Go to https://codesandbox.io/s/sweet-darkness-15q1m?file=/src/posts.js:1446-1462
• Open your browser inspector
• Go in the integrated browser to post/create
• You should see "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 the console
• Choose nom 2 in the first select
• You should see an infinite loop and real browser (firefox at least) ask to stop the process

Related code:

• Go to https://codesandbox.io/s/sweet-darkness-15q1m?file=/src/posts.js:1446-1462

<SimpleForm>
      <FormDataConsumer>
        {({ formData, ...rest }) => {
          return (
            <SelectArrayInput
              label="User"
              source="userId"
              initialValue={[1]}
              choices={[
                { id: 1, name: "nom1" },
                { id: 2, name: "nom2" },
                { id: 3, name: "nom3" },
                { id: 4, name: "nom4" }
              ]}
            >
              <ChipField source="name" />
            </SelectArrayInput>
          );
        }}
      </FormDataConsumer>
      {/*...*/}
</SimpleForm>

Other information:

Environment

• React-admin version: 3.10.2
• React version: 17.0.1
• Browser: firefox & chrome tested
• Stack trace (in case of a JS error):

[etienne-bondot]

I've tested you code, and fix it, this is working

 <Create {...props}>
    <SimpleForm>
      <SelectArrayInput
        label="User"
        source="userId"
        initialValue={[1]}
        choices={[
          { id: 1, name: "nom1" },
          { id: 2, name: "nom2" },
          { id: 3, name: "nom3" },
          { id: 4, name: "nom4" }
        ]}
      >
        <FormDataConsumer>
          {({ getSource, ...rest }) => <ChipField source={getSource("name")} />}
        </FormDataConsumer>
      </SelectArrayInput>
      <TextInput source="title" />
      <TextInput multiline source="body" />
    </SimpleForm>
  </Create>

See here https://codesandbox.io/s/condescending-hopper-31heb?file=/src/posts.js

[fzaninotto]

Thanks @etienne-bondot !

[pflima92]

Hi @etienne-bondot, the fix proposed does not seems to work when you do need to have the SelectArrayInput as a child of a FormDataConsumer, e.g:

<SimpleForm>
      <FormDataConsumer>
        {({ formData, ...rest }) => {

            formData.someValue ? <SelectArrayInput
              label="User"
              source="userId"
              initialValue={[1]}
              choices={[
                { id: 1, name: "nom1" },
                { id: 2, name: "nom2" },
                { id: 3, name: "nom3" },
                { id: 4, name: "nom4" }
              ]}
            />
       : null // or some other stuff
        }}
      </FormDataConsumer>
      {/*...*/}
</SimpleForm>

The browser will crash as described by @nicodmf, only happens when the initialValue is assigned to that Input.

[Nunobpinto]

I'm still experiencing this bug as well as of react-admin@3.16.4, why is it closed?

[djhi]

@Nunobpinto Can you please provide a sandbox showing the issue ?

[djhi]

Nevermind, the original sandbox still shows the issue indeed.

[razorsharpshady]

@pflima92 Thank you for pointing out the initialValue part, It saved my day :)

[WiXSL]

UPDATE: I can't reproduce this in version 4 of react-admin anymore

[fzaninotto]

With the release of react-admin v5, react-admin v3 has reached its end of life. We won't fix bugs or make any new release on the 3.x branch. We recommend that you switch to a more recent version of react-admin.

So I'm closing this issue as we won't fix it.