Infinite re-rendering using disabled AutocompleteArrayInput in a ReferenceArrayInput

[Nitix]

What you were expecting:

An stable page with a An AutocompleteArrayInput in an ReferenceArrayInput

What happened instead:

AutocompleteArrayInput keeps re-rendering

Steps to reproduce:

Add a disabled AutocompleteArrayInput in a ReferenceArrayInput

Related code: https://stackblitz.com/edit/github-dmhu7h?file=src%2Fposts%2FPostEdit.tsx,package.json

Other information:

Environment

• React-admin version: 4.6.12
• Last version that did not exhibit the issue (if applicable):
• React version: 18
• Browser: Firefox 123
• Stack trace (in case of a JS error):

  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.
  AutocompleteInput@https://githubdmhu7h-miy1--8080--810981ba.local-corp.webcontainer.io/node_modules/.vite/deps/chunk-MFCMXL24.js?v=75640c3d:113882:21
  AutocompleteArrayInput@https://githubdmhu7h-miy1--8080--810981ba.local-corp.webcontainer.io/node_modules/.vite/deps/chunk-MFCMXL24.js?v=75640c3d:114219:22
  ChoicesContextProvider@https://githubdmhu7h-miy1--8080--810981ba.local-corp.webcontainer.io/node_modules/.vite/deps/chunk-MFCMXL24.js?v=75640c3d:15661:18
  ResourceContextProvider@https://githubdmhu7h-miy1--8080--810981ba.local-corp.webcontainer.io/node_modules/.vite/deps/chunk-MFCMXL24.js?v=75640c3d:14501:18
  ReferenceArrayInput@https://githubdmhu7h-miy1--8080--810981ba.local-corp.webcontainer.io/node_modules/.vite/deps/chunk-MFCMXL24.js?v=75640c3d:119879:14
  div

My poor Firefox :fox_face:

[adguernier]

Reproduced, thanks for this report :pray:

[fzaninotto]

Interesting: I can reproduce with 2 ReferenceArrayInputs

const PostEdit = () => (
  <Edit>
    <SimpleForm defaultValues={{ average_note: 0 }} warnWhenUnsavedChanges>
      <ReferenceArrayInput source="authors" reference="users">
        <AutocompleteArrayInput fullWidth disabled />
      </ReferenceArrayInput>
      <TagReferenceInput reference="tags" source="tags" label="Tags" />
    </SimpleForm>
  </Edit>
);

But not with 1:

const PostEdit = () => (
  <Edit>
    <SimpleForm defaultValues={{ average_note: 0 }} warnWhenUnsavedChanges>
      <ReferenceArrayInput source="authors" reference="users">
        <AutocompleteArrayInput fullWidth disabled />
      </ReferenceArrayInput>
      {/*<TagReferenceInput reference="tags" source="tags" label="Tags" /> */}
    </SimpleForm>
  </Edit>
);

See my stackblitz https://stackblitz.com/edit/github-dmhu7h-ytpyvk?file=src%2Fposts%2FPostEdit.tsx

[fzaninotto]

I confirm the bug is triggered by having 2 ReferenceArrayInput in the same form, one of which at least uses a disabled AutocompleteArrayInput. This is probably a loop in the form state management. The trigger: React-hook-form removes disabled fields from the input state.

[fzaninotto]

No need for ReferenceArrayInput. Two autocompleteInputs are enough.

const PostEdit = () => (
  <Edit>
    <SimpleForm>
        <AutocompleteArrayInput source="authors" disabled choices={[]} />
        <AutocompleteArrayInput source="tag_ids" choices={[]} />
    </SimpleForm>
  </Edit>
);

Click on the second input to trigger the bug

[fzaninotto]

The bug requires react-hook-form >= 7.49.1. It doesn't occur with v4.19.0.

It's probably caused by one of the two following changes:

• https://github.com/react-hook-form/react-hook-form/pull/11277
• https://github.com/react-hook-form/react-hook-form/pull/11291

See https://github.com/react-hook-form/react-hook-form/releases/tag/v7.49.1

[fzaninotto]

The bug occurs here in react-admin:

https://github.com/marmelab/react-admin/blob/717d292192f5d44dc5f10a05f2699f354ad06bae/packages/ra-core/src/form/useApplyInputDefaultValues.ts#L91

Commenting this line removed the bug.