React-admin: Warning: Cannot update a component (XXX) while rendering a different component

[OoDeLally]

What you were expecting:

No warning.

What happened instead:

A state change in a TextField provokes a console warning (see at the bottom of the post.)

Steps to reproduce:

For some unknown reason, the warning does NOT appear on codesandbox:

https://codesandbox.io/s/cool-curie-szq97

However if you do File > Export to ZIP and then execute the same code on your local browser, you (hopefully) get the warning.

1. Execute on your local browser.

2. Go to the Create Page.

3. Open your console.

4. Write a letter inside the Language input.

5. A warning should appear.

This may be something with the validation:

validate={validateTemplate}

If this attribute is removed from the TextInput, then the warning does not appear...

Really strange..

Environment

• React-admin version: 3.4.0 (also on 3.3.3 and 3.0.0)
• Last version that did not exhibit the issue (if applicable): /
• React version: 16.13.1
• Browser: Chrome & Firefox
• Stack trace (in case of a JS error):

Warning: Cannot update a component (`XXX`) while rendering a different component (`TextInput`). To locate the bad setState() call inside `TextInput`, follow the stack trace as described in https://fb.me/setstate-in-render
    in TextInput (at word-editor.tsx:45)
    in div (created by Styled(MuiBox))
    in Styled(MuiBox) (at word-editor.tsx:43)
    in div (created by Styled(MuiBox))
    in Styled(MuiBox) (at word-editor.tsx:39)
    in div (created by Styled(MuiBox))
    in Styled(MuiBox) (at word-editor.tsx:38)
    in div (created by Styled(MuiBox))
    in Styled(MuiBox) (at word-editor.tsx:37)
    in XXX (at word-editor.tsx:74)
    in form (at word-editor.tsx:73)
    in FormView (created by ReactFinalForm)
    in ReactFinalForm (created by FormWithRedirect)
    in FormWithRedirect (at word-editor.tsx:66)
    in WordCreatorForm (at word-editor.tsx:86)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Card))
    in ForwardRef(Card) (created by WithStyles(ForwardRef(Card)))
    in WithStyles(ForwardRef(Card)) (created by CreateView)
    in div (created by CreateView)
    in div (created by CreateView)
    in CreateView (created by Create)
    in Create (at word-editor.tsx:85)
    in WordCreator (at word.tsx:28)
    in WordCreate (created by WithPermissions)
    in WithPermissions (created by Context.Consumer)
    in Route (created by ResourceRoutes)
    in Switch (created by ResourceRoutes)
    in ResourceRoutes (created by Resource)
    in Resource (at App.tsx:97)
    in Route (created by RoutesWithLayout)
    in Switch (created by RoutesWithLayout)
    in RoutesWithLayout (created by Context.Consumer)
    in div (created by Layout)
    in main (created by Layout)
    in div (created by Layout)
    in div (created by Layout)
    in Layout (created by WithStyles(Layout))
    in WithStyles(Layout) (created by Context.Consumer)
    in withRouter(WithStyles(Layout)) (created by ConnectFunction)
    in ConnectFunction (created by LayoutWithTheme)
    in ThemeProvider (created by LayoutWithTheme)
    in LayoutWithTheme (created by Context.Consumer)
    in Route (created by CoreAdminRouter)
    in Switch (created by CoreAdminRouter)
    in div (created by CoreAdminRouter)
    in CoreAdminRouter (created by Context.Consumer)
    in Route (created by CoreAdminUI)
    in Switch (created by CoreAdminUI)
    in CoreAdminUI (created by AdminUI)
    in AdminUI (created by Admin)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by ConnectFunction)
    in ConnectFunction (created by CoreAdminContext)
    in TranslationProvider (created by CoreAdminContext)
    in Provider (created by CoreAdminContext)
    in CoreAdminContext (created by AdminContext)
    in AdminContext (created by Admin)
    in Admin (at App.tsx:60)
    in App (at src/index.tsx:7)

[TomJannes]

This seems to be linked to https://github.com/final-form/react-final-form/issues/751 and should be fixed in the current version of react-final-form.
UPDATE: i changed the version of react-final-form to the latest and the issue is still there

[TomJannes]

I have this issue whenever i put my validation on a input within a referenceinput.
ex:
<ReferenceInput label="Address type" resource="addresstypes" source="addressTypeId" reference="addresstypes"><SelectInput optionText="name" validate={required()} /></ReferenceInput> throws the warning while
<ReferenceInput label="Address type" resource="addresstypes" source="addressTypeId" reference="addresstypes" validate={required()} ><SelectInput optionText="name" /></ReferenceInput> does not

[fzaninotto]

Duplicate of #4572. If you upgrade your react-final-form version, make sure it's properly resolved and unique in your yarnb.lock.

[OoDeLally]

Here is my yarn.lock

[email protected], react-final-form@^6.3.3:
  version "6.4.0"
  resolved "https://registry.yarnpkg.com/react-final-form/-/react-final-form-6.4.0.tgz#7f9064c10a8bee6a02cd3e9b8aff06fa07f9c908"
  integrity sha512-M7J7f0pnoj0o8sBq3iG6jsWJEh08pNUyl2D4wBC9SJvCNkGdol2UdyjMiEFYD3rz9LIFzQqFSG0kbRBCadqzhA==
  dependencies:
    "@babel/runtime" "^7.9.2"
    ts-essentials "^6.0.3"

react-final-form@^6.3.3 seems required by react-admin, and [email protected] by myself, so 6.4.0 is installed.
I verified that only 6.4.0 is installed in node_modules/react-final-form:

  "name": "react-final-form",
  "version": "6.4.0",
  "description": "🏁 High performance subscription-based form state management for React",
  ...

I still have the same problem.

[bard]

On react-final-form 6.4.0 and final-form 4.19.1, encountering same issue as https://github.com/marmelab/react-admin/issues/4665#issuecomment-611579207. Moving validate={required()} from SelectInput up to ReferenceInput (as per the same comment) fixes it.