Use of FormDataConsumer with a disabled TextInput creates a bad setState()

[Revarh]

What you were expecting: I am using SimpleForm and I want to use FormDataConsumer to update inputs.

What happened instead: When I use FormDataConsumer along with a disabled props in a TextInput, it creates a bad setState() and breaks my form:

Warning: Cannot update a component (SaveButton) while rendering a different component (TextInput). To locate the bad setState() call inside TextInput, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

Steps to reproduce: Create an editing form, use FormDataConsumer and then disable a textInput.

Other information: You can try the bug here: https://github.com/Revarh/test_bug_react-admin Use yarn, then yarn start

Environment

• React-admin version: 4.16.7
• Last version that did not exhibit the issue (if applicable):
• React version: 18
• Browser: Firefox
• Stack trace (in case of a JS error): next useFormState.ts:68 next createSubject.ts:22 updateTouchAndDirty createFormControl.ts:337 _updateDisabledField createFormControl.ts:977 register createFormControl.ts:997 useController useController.ts:73 useInput useInput.ts:66 TextInput TextInput.tsx:42

[nicofrand]

I have a similar issue where the data passed to my provider has my disabled field set to undefined.

[Revarh]

I added a test repo to my original query. Thank you everyone!

[aMahdaoui]

Same behavior while trying to update Firebase document :

barecode property received as undefined when TextInput is disabled

FirebaseError: [code=invalid-argument]: Function updateDoc() called with invalid data.
Unsupported field value: undefined (found in field bareCode in document products/cvbz95WZmSZhAT5vHjQl)

[adguernier]

Thanks for this report, after investigating, I can reproduce and see the error in the console. It seems this issue in related to #9498.

Until it fixed, you can prevent this error by setting disabled in InputProps, such as: <TextInput source="id" fullWidth InputProps={{ disabled: true }} />

[slax57]

Quick update: I spent half a day trying to figure out what exactly is causing this warning, and how to work around it, but with no luck. I'm pretty convinced this is due to a state mismanagement in the react-hook-form library, consecutive to the change they recently made in the way the disabled inputs are handled. But I couldn't reproduce it in a RHF only sandbox so far...

Nevertheless, this issue will probably be resolved along when we address issue #9498, which will require some time because we will probably need to implement support for the readOnly prop on all inputs.

[slax57]

Fixed by https://github.com/marmelab/react-admin/pull/9656