[TextField] "Maximum update depth exceeded." in Internet Explorer 11

[bitoverflow]

App crashes with "Maximum update depth exceeded" triggered by filling a TextField on Internet Explorer 11

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When typing text in a Textfield, the app crashed when all visible space is filled up.
Only observed in IE11

Expected Behavior 🤔

The initial visible rows of the textField should grow until reaching rowsMax.
Works as expected in Safari and Chrome

Steps to Reproduce 🕹

https://stackblitz.com/edit/react-ts-6luqab

Steps:

1. The Textfield need the following parameters rows, rowsMax, fullWidth, multiline
2. Type text in textfield until crashing (fill all visible space)

Your Environment 🌎

Tech	Version
Material-UI	v4.5.0
React	16.10.0
React-Dom	16.10.0
Browser	Internet Explorer 11 (tested in Browserstack)

[adeelibr]

I can confirm this behavior. I will try to look into this 😄 Thank you for pointing this out.

[oliviertassinari]

In this context, I would propose that we put protection in place to limit the number of rerenders, we don't want to see the UI crash because of a layout instability:

diff --git a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js
index d7040ddc1..52550922a 100644
--- a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js
+++ b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js
@@ -33,6 +33,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref)
   const inputRef = React.useRef(null);
   const handleRef = useForkRef(ref, inputRef);
   const shadowRef = React.useRef(null);
+  const renders = React.useRef(0);
   const [state, setState] = React.useState({});

   const syncHeight = React.useCallback(() => {
@@ -76,10 +77,12 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref)
       // Need a large enough different to update the height.
       // This prevents infinite rendering loop.
       if (
-        (outerHeightStyle > 0 &&
+        renders.current < 10 &&
+        ((outerHeightStyle > 0 &&
           Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1) ||
-        prevState.overflow !== overflow
+          prevState.overflow !== overflow)
       ) {
+        renders.current += 1;
         return {
           overflow,
           outerHeightStyle,
@@ -91,6 +94,8 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref)
   }, [rows, rowsMax, props.placeholder]);

   React.useEffect(() => {
+    renders.current = 0;
+
     const handleResize = debounce(() => {
       syncHeight();
     });
@@ -107,6 +112,8 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref)
   });

   const handleChange = event => {
+    renders.current = 0;
+
     if (!isControlled) {
       syncHeight();
     }

Maybe, we would want to trigger a warning and a test case too.

[captain-yossarian]

@adeelibr If you don't mind I can pick it up

[adeelibr]

@SerhiiBilyk sure go ahead :)

[captain-yossarian]

@adeelibr unfortunately I'm unable to run IE on my laptop :( So feel free to pick it up

[st3ffane]

I tried version 4.7.2 on Chrome 79.0.3945.130 on Windows 10 and reproduced this issue.
Seems to be better when adding "box-sizing: border-box" to the .inputbar-input class.

[SofianeDjellouli]

Hi, I'll be working on this if that's OK with you guys.