From 593ce92a98736750ef90d690f7117fd28270285b Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Thu, 26 Apr 2018 22:10:54 +0200
Subject: [PATCH] [Input] Fix infinite rendering loop

---
 packages/material-ui/src/Input/Textarea.js      | 9 ++++++---
 packages/material-ui/src/Input/Textarea.test.js | 4 ++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/material-ui/src/Input/Textarea.js b/packages/material-ui/src/Input/Textarea.js
index 66ff8e020ec1d7..7a50ec5dcfe38f 100644
--- a/packages/material-ui/src/Input/Textarea.js
+++ b/packages/material-ui/src/Input/Textarea.js
@@ -78,13 +78,14 @@ class Textarea extends React.Component {
     this.syncHeightWithShadow();
   }, 166); // Corresponds to 10 frames at 60 Hz.
 
-  syncHeightWithShadow(props = this.props) {
+  syncHeightWithShadow() {
+    const props = this.props;
     if (!this.shadow || !this.singlelineShadow) {
       return;
     }
 
     // The component is controlled, we need to update the shallow value.
-    if (typeof this.props.value !== 'undefined') {
+    if (typeof props.value !== 'undefined') {
       this.shadow.value = props.value == null ? '' : String(props.value);
     }
 
@@ -103,7 +104,9 @@ class Textarea extends React.Component {
 
     newHeight = Math.max(newHeight, lineHeight);
 
-    if (this.state.height !== newHeight) {
+    // Need a large enough different to update the height.
+    // This prevents infinite rendering loop.
+    if (Math.abs(this.state.height - newHeight) > 1) {
       this.setState({
         height: newHeight,
       });
diff --git a/packages/material-ui/src/Input/Textarea.test.js b/packages/material-ui/src/Input/Textarea.test.js
index f91e4d6ad81129..5ab8ad26ebdad8 100644
--- a/packages/material-ui/src/Input/Textarea.test.js
+++ b/packages/material-ui/src/Input/Textarea.test.js
@@ -86,10 +86,10 @@ describe('<Textarea />', () => {
 
     it('should respect the rowsMax property', () => {
       const instance = wrapper.instance();
-      const rowsMax = 2;
+      const rowsMax = 4;
       const lineHeight = 19;
       instance.singlelineShadow = { scrollHeight: lineHeight };
-      instance.shadow = { scrollHeight: lineHeight * 3 };
+      instance.shadow = { scrollHeight: lineHeight * 5 };
       wrapper.setProps({ rowsMax });
       assert.strictEqual(wrapper.state().height, lineHeight * rowsMax);
     });