Issue 7175 (#7260)

The height of the TextField was not taking into account the size of the value when the TextField was first rendered.

The code looks at the height of the hintText, or, if the value has changed, it looks at the height of the value.

Made changes so that the value is passed into the function that is calculating the height, both when the component is mounted, or the component is resized.

I have had to skip a unit test because jsdom does not support scrollHeight. The unit test code is within the test file, and could be "unskipped" later if jsdom can do layout, or another engine is used.

src/TextField/EnhancedTextarea.js

@@ -68,7 +68,7 @@ class EnhancedTextarea extends Component {
   }
 
   componentDidMount() {
-    this.syncHeightWithShadow();
+    this.syncHeightWithShadow(this.props.value);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -79,7 +79,7 @@ class EnhancedTextarea extends Component {
   }
 
   handleResize = (event) => {
-    this.syncHeightWithShadow(undefined, event);
+    this.syncHeightWithShadow(this.props.value, event);
   };
 
   getInputNode() {

src/TextField/EnhancedTextarea.spec.js

@@ -0,0 +1,43 @@
+/* eslint-env mocha */
+import React from 'react';
+import PropTypes from 'prop-types';
+import {mount} from 'enzyme';
+import {assert} from 'chai';
+import EnhancedTextarea from './EnhancedTextarea';
+import getMuiTheme from '../styles/getMuiTheme';
+
+describe('<EnhancedTextArea />', () => {
+  const muiTheme = getMuiTheme();
+  const rowHeight = 24;
+  const mountWithContext = (node) => mount(node, {
+    context: {muiTheme},
+    childContextTypes: {muiTheme: PropTypes.object},
+  });
+
+  it('renders with no arguments', () => {
+    const wrapper = mountWithContext(
+      <EnhancedTextarea />
+    );
+    assert.isAbove(wrapper.find('div').length, 0);
+  });
+
+  it('has one row initial height', () => {
+    const wrapper = mountWithContext(
+      <EnhancedTextarea />
+    );
+    assert.strictEqual(wrapper.state().height, rowHeight);
+  });
+
+  // This test will not succeed due to
+  // jsdom limitations
+  // https://github.com/tmpvar/jsdom/issues/1013
+  /* eslint mocha/no-skipped-tests: 0 */
+  it.skip('has zero initial height', () => {
+    const wrapper = mountWithContext(
+      <EnhancedTextarea
+        value="A really long string that should go over multiple lines and should trigger more rows than one"
+      />
+    );
+    assert.isAbove(wrapper.state().height, rowHeight);
+  });
+});