material-ui: [TextField] `Too many re-renders. The layout is unstable.` error message with `multiline` enabled in controlled mode

Not really worried about the error messages lol. More worried about the performance issues.

same problem… versions:

“@mui/material”: “^5.13.7”, “react”: “^18.2.0”, I’m still encountering an error too

I’m currently facing an issue with the multiline functionality in the TextField component while using NodeJS 18.2 and MUI 5.13. Despite being on the latest versions, I’m still encountering an error. Whenever I try to use multiline, the TextField doesn’t behave as expected.

// mui-base/TextareaAutosize/TextareaAutosize.js
useEnhancedEffect(() => {
  syncHeight();
}, [value]); // added `value` as a depedency, instead of no depedencies at all

This issue always occurs for me (in a styled material TextField component , with some tailwind but nothing special) and the above code still fixes the issue in my case. Cannot really explain why it occurs for me and not for you guys. I ll try to investigate again soon

I just encountered this bug myself. My team mate could set minRows: {1} and the bug disappeared for him, but not for me on my computer.

We are working on the same branch in the same git repo. And we can’t figure out why this is happening. We also deleted all the node modules and re-installed.

The workaround for me was to add the rows prop e.g:

rows:"3"

but that fixates the textarea to only show 3 rows. If more rows are added it becomes a scrollable textarea. And that is not really what i wanted. So i don’t know if i really can call it a workaround but it works for now.

@mui/material": "^5.14.12

Do you and your teammate have different monitors? I had this happen when my textField was being constrained by css and couldn’t grow to target size.

Is there any sort of planned fix for this issue?

I’m still seeing it with the following versions:

"@mui/material": "^5.14.13",
"react": "^18.2.0",

I have checked the MUI docs and specifying rows should not be required, but if you dont set the row prop you get the bug.

I also tried setting minRows to 1 so the rest of the TextArea would resize automatically to fit the content but I got the same bug. If minRows is set to the exact number of rows you need + 1 you dont get the bug but if minRows is under or equal to the height of your TextArea you also get the problem.

The only solution that worked so far is setting the rows prop or setting the minRows prop to the number of rows of the text + 1, so I think it may be a problem of the autosizing calculation.

Is this the expexted behaviour of the component?? To require a rows input if multiline is true? This kind of defeats the purpose of auto-scaling up to the number of rows? I can confirm that if rows is not specified there is an infinite loop error. This is the version that I have: 5.14.11 Would this be looked into or this is the expected behaviour, just asking out of curiosity…

I encountered this error, and after some investigation, I realized that there is a bug in the multiline prop of the TextField. If you don’t specify the rows prop, it goes into an infinite loop and triggers the error. I fixed it by setting the rows prop to ‘5’, and the error stopped occurring.

This has been the solution that worked for me:

 <TextField
              label='Description'
              variant='filled'
              fullWidth
              rows='5'
              multiline
              sx={{ mb: 1 }}
              {...register('description', {
                required: 'This field is required',
                minLength: { value: 2, message: 'Minimum 2 characters' },
              })}
              error={!!errors.description}
              helperText={errors.description?.message}
            />

After this the infinite loop error was solved.