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

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):

[djhi]

Nevermind, the original sandbox still shows the issue indeed.

[Nunobpinto]

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