* Added multiline height, see #811

components/input/Input.js

@@ -41,7 +41,8 @@ const factory = (FontIcon) => {
         withIcon: React.PropTypes.string
       }),
       type: React.PropTypes.string,
-      value: React.PropTypes.any
+      value: React.PropTypes.any,
+      rows: React.PropTypes.number,
     };
 
     static defaultProps = {
@@ -94,15 +95,21 @@ const factory = (FontIcon) => {
 
     handleAutoresize = () => {
       const element = this.refs.input;
-      // compute the height difference between inner height and outer height
+      const rows = this.props.rows;
-      const style = getComputedStyle(element, null);
-      const heightOffset = style.boxSizing === 'content-box'
-        ? -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom))
-        : parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
 
-      // resize the input to its content size
+      if (typeof rows === 'number' && !isNaN(rows)) {
-      element.style.height = 'auto';
+        element.style.height = null;
-      element.style.height = `${element.scrollHeight + heightOffset}px`;
+      } else {
+        // compute the height difference between inner height and outer height
+        const style = getComputedStyle(element, null);
+        const heightOffset = style.boxSizing === 'content-box'
+          ? -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom))
+          : parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
+
+        // resize the input to its content size
+        element.style.height = 'auto';
+        element.style.height = `${element.scrollHeight + heightOffset}px`;
+      }
     }
 
     handleKeyPress = (event) => {
@@ -137,7 +144,7 @@ const factory = (FontIcon) => {
     render () {
       const { children, disabled, error, floating, hint, icon,
               name, label: labelText, maxLength, multiline, required,
-              theme, type, value, onKeyPress, ...others} = this.props;
+              theme, type, value, onKeyPress, rows = 1, ...others} = this.props;
       const length = maxLength && value ? value.length : 0;
       const labelClassName = classnames(theme.label, {[theme.fixed]: !floating});
 
@@ -169,7 +176,7 @@ const factory = (FontIcon) => {
         inputElementProps.maxLength = maxLength;
         inputElementProps.onKeyPress = onKeyPress;
       } else {
-        inputElementProps.rows = 1;
+        inputElementProps.rows = rows;
         inputElementProps.onKeyPress = this.handleKeyPress;
       }
 

components/input/readme.md

@@ -40,8 +40,9 @@ If you want to provide a theme via context, the component key is `RTInput`.
 | `hint`          | `String`                | `''`            | The text string to use for hint text element.|
 | `icon`          | `String` or `Element`   |                 | Name of an icon to use as a label for the input.|
 | `label`         | `String`                |                 | The text string to use for the floating label element.|
-| `maxLength`     | `Number`                |                 |Specifies the maximum number of characters allowed in the component.|
+| `maxLength`     | `Number`                |                 | Specifies the maximum number of characters allowed in the component.|
 | `multiline`     | `Boolean`               | `false`         | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
+| `rows`          | `Number`                |                 | The number of rows the multiline input field has.|
 | `onBlur`        | `Function`              |                 | Callback function that is fired when component is blurred.|
 | `onChange`      | `Function`              |                 | Callback function that is fired when the component's value changes.|
 | `onFocus`       | `Function`              |                 | Callback function that is fired when component is focused.|

spec/components/input.js

@@ -8,7 +8,8 @@ class InputTest extends React.Component {
     withIcon: '',
     withCustomIcon: '',
     withHintCustomIcon: '',
-    multilineHint: 'Long Description here'
+    multilineHint: 'Long Description here',
+	multilineRows: 'A\n\B\nC\nD\nE\nF'
   };
 
   handleChange = (name, value) => {
@@ -29,6 +30,7 @@ class InputTest extends React.Component {
         <Input type='email' value={this.state.fixedLabel} label='Label fixed' floating={false} onChange={this.handleChange.bind(this, 'fixedLabel')} />
         <Input type='text' value='Read only' readOnly label='Phone Number' />
         <Input type='email' value={this.state.multilineHint} label='Description' hint='Enter Description' multiline onChange={this.handleChange.bind(this, 'multilineHint')} />
+		<Input type='text' value={this.state.multilineRows} label='Row Limited Description' hint='Enter Description' multiline rows={4} onChange={this.handleChange.bind(this, 'multilineRows')} />
         <Input type='text' label='Disabled field' disabled />
         <Input type='tel' value={this.state.withIcon} required label='With icon' onChange={this.handleChange.bind(this, 'withIcon')} icon='phone' />
         <Input type='tel' value={this.state.withCustomIcon} label='With custom icon' onChange={this.handleChange.bind(this, 'withCustomIcon')} icon='favorite' />