Material-ui: Maximum update depth exceeded using flexible multiline text field in dialog content

[desy83]

Expected Behavior

flexible mutliline text field should be nested in dialog content without any react state update infinity loops

Current Behavior

typing the first letter in the flexible mutliselect text box iam getting following error message

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Steps to Reproduce (for bugs)

<Dialog>
  <DialogContent>
   <TextField
    id="multiline-flexible"
    label="label"
    multiline
    rowsMax="2"
    value={value}
    onChange={this.handleChange('value')}
    margin="normal"
    />
  </DialogContent>
</Dialog>

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.0.0-beta.38 |
| React | v16.2.0 |
| browser | Firefox 59 |

[oliviertassinari]

@desy83 Do you have a reproduction example?

[oliviertassinari]

Your issue has been closed because it does not conform to our issue requirements.
Please provide a full reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template _may_ be a good starting point. Thank you!

[desy83]

I clould reproduce the issue on codesandbox https://codesandbox.io/s/3222mr5ywp.

[oliviertassinari]

@desy83 Your codesandbox is working fine on my side.

[desy83]

See a live demo: https://ibb.co/iOjy5H
Please retry my codesandbox, forgot to save my application: https://codesandbox.io/s/3222mr5ywp
Browser: Firefox 59.0.1

[oliviertassinari]

@desy83 It's still working fine on my end 🤔.

[layerssss]

I'm able to track this by Rollbar for only one user in our production system as well. But I haven't been able to find a way to recreate this after spending a while. 🤔

Browser / OS: Chrome/63.0.3239.132 / Windows 7
material-ui: 1.0.0-beta.36
react: 16.2.0

[grigored]

I'm also seeing this error, but only in production, not on dev. Also rendering a multiline input in a dialog. By looking at the chrome console (though compiled/minified), this seems to be the line that causes the problem. Will try to create an example later.

[grigored]

Was using webpack 2.7. Updated to webpack 4.4.1 and now it works great.

[zhdanouskikh]

This issue is still reproducible on latest beta for 4th version of mui. If you have a multiline TextField in dialogue - app crashes with infinity update loop. Please reopen it and fix.

Browser / OS: Chrome 74.0.3729.131 (Official Build) (64-bit) / Mac OS
material-ui: 4.0.0-beta.1
react: 16.8.6

[zhdanouskikh]

BTW issue is always reproducing on Safari on prod build on previous releases.
Now it's reproducing even on dev build with latest beta

[oliviertassinari]

@zhdanouskikh How can we reproduce the problem? I can't: https://codesandbox.io/s/x7yy0p43xw.

[charlax]

I'm also having the problem on Firefox (no issue on Chrome), on dev (can't reproduce on production), using a multiline field. Unfortunately, the code is pretty complicated. Pretty sure this issue is very hard to reproduce. From the stack, it looks like it's related to syncHeight.

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. react-dom.development.js:57
    React 3
    dispatchAction self-hosted:1086
    syncHeight Textarea.js:84
    Textarea Textarea.js:109
    React 8
    unstable_runWithPriority scheduler.development.js:255
    React 7
    dispatchAction self-hosted:1086
    TaskWrapper TaskWrapper.tsx:34

The above error occurred in the <ForwardRef(Textarea)> component:
    in ForwardRef(Textarea) (created by ForwardRef(InputBase))
    in div (created by ForwardRef(InputBase))
    in ForwardRef(InputBase) (created by WithStyles(ForwardRef(InputBase)))
    in WithStyles(ForwardRef(InputBase)) (created by ForwardRef(OutlinedInput))
    in ForwardRef(OutlinedInput) (created by WithStyles(ForwardRef(OutlinedInput)))
    in WithStyles(ForwardRef(OutlinedInput)) (created by ForwardRef(TextField))
    in div (created by ForwardRef(FormControl))
    in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl)))
    in WithStyles(ForwardRef(FormControl)) (created by ForwardRef(TextField))
    in ForwardRef(TextField) (created by WithStyles(ForwardRef(TextField)))

[oliviertassinari]

@charlax We have done a few changes to the multiline handling logic in the master branch. Could you try the next release v4.2.0 this weekend? Most notably, the logic was isolated into its own component: TextareaAutosize. We might have fixed the issue. We would need a reproduction to know for sure. Thank you!

[charlax]

Thanks for adding this component - I had implemented it myself and will now be able to remove it.

Awesome, will try it out this week-end.

[charlax]

Just tried it, still happenning:

The above error occurred in the <ForwardRef(TextareaAutosize)> component:
    in ForwardRef(TextareaAutosize) (created by ForwardRef(InputBase))
    in div (created by ForwardRef(InputBase))
    in ForwardRef(InputBase) (created by WithStyles(ForwardRef(InputBase)))
    in WithStyles(ForwardRef(InputBase)) (created by ForwardRef(OutlinedInput))
    in ForwardRef(OutlinedInput) (created by WithStyles(ForwardRef(OutlinedInput)))
    in WithStyles(ForwardRef(OutlinedInput)) (created by ForwardRef(TextField))
    in div (created by ForwardRef(FormControl))
    in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl)))
    in WithStyles(ForwardRef(FormControl)) (created by ForwardRef(TextField))

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. react-dom.development.js:57

React 3
        invariant
        scheduleWork
        dispatchAction
    dispatchAction self-hosted:1086
    syncHeight TextareaAutosize.js:74
    TextareaAutosize TextareaAutosize.js:98
    React 8
    unstable_runWithPriority scheduler.development.js:255
    React 7
    dispatchAction self-hosted:1086
    TaskWrapper TaskWrapper.tsx:34

[oliviertassinari]

@charlax Do you think that you can recreate a reproduction so I can look at it?

[charlax]

I tried quickly but couldn't write a simple reproduction... The bug appears in a component that is pretty deep in the stack...

Perhaps some console.log would help if you give me some pointers as to where to put them?

[oliviertassinari]

Add one in https://github.com/mui-org/material-ui/blob/7d826a907ba4928d62940bdd57864b32aaeb0a02/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js#L71-L73.

[charlax]

And now I can't reproduce the bug...

Heisenbug?

[oliviertassinari]

@charlax I'm sure the bug will come back at some point to haunt us.