[Input] Fix infinite rendering loop (#11159)

mui · Apr 26, 2018 · 0da0955 · 0da0955
1 parent b8bae94
commit 0da0955
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git 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
@@ -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);
     });