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

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)

[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.

[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