[FIX] - Remove React.Fragment to prevent maximum update depth exceede…

…d error in IE11

docs/src/pages/components/text-fields/BasicTextFieldsRow.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    '& > *': {
+      margin: theme.spacing(1),
+      width: 200,
+    },
+  },
+}));
+
+export default function BasicTextFieldsRow() {
+  const classes = useStyles();
+  const [message, setMessage] = React.useState('');
+
+  return (
+    <form className={classes.root} noValidate autoComplete="off">
+      <TextField
+        fullWidth
+        multiline
+        rows={3}
+        rowsMax={8}
+        value={message}
+        onChange={event => setMessage(event.target.value)}
+      />
+    </form>
+  );
+}

docs/src/pages/components/text-fields/text-fields.md

@@ -21,6 +21,14 @@ It supports standard, outlined and filled styling.
 ([here's why](https://medium.com/google-design/the-evolution-of-material-designs-text-fields-603688b3fe03)),
 but Material-UI will continue to support it.
 
+## TextField (Maximum update depth exceeded error IE11)
+
+The `TextField` wrapper component is a complete form control including a label, input and help text.
+
+It supports standard, outlined and filled styling.
+
+{{"demo": "pages/components/text-fields/BasicTextFieldsRow.js"}}
+
 ## Form props
 
 Standard form attributes are supported e.g. `required`, `disabled`, `type`, etc. as well as a `helperText` which is used to give context about a field’s input, such as how the input will be used.
@@ -133,10 +141,13 @@ In some circumstances, we can't determine the "shrink" state (number input, date
 ![shrink](/static/images/text-fields/shrink.png)
 
 To workaround the issue, you can force the "shrink" state of the label.
+
 ```jsx
 <TextField InputLabelProps={{ shrink: true }} />
 ```
+
 or
+
 ```jsx
 <InputLabel shrink>Count</InputLabel>
 ```

packages/material-ui/src/TextareaAutosize/TextareaAutosize.js

@@ -119,7 +119,11 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref)
   };
 
   return (
-    <React.Fragment>
+    <div
+      style={{
+        all: 'inherit',
+      }}
+    >
       <textarea
         value={value}
         onChange={handleChange}
@@ -143,7 +147,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref)
         tabIndex={-1}
         style={{ ...styles.shadow, ...style }}
       />
-    </React.Fragment>
+    </div>
   );
 });