react-admin
react-admin copied to clipboard
marmelab
Use of FormDataConsumer with a disabled TextInput creates a bad setState()
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
I have a similar issue where the data passed to my provider has my disabled field set to undefined.
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)
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 }} />
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.
