[TextField] Add in support for multiline text fields

docs/src/pages/component-demos/text-fields/TextFields.js

@@ -56,8 +56,15 @@ export default class TextFields extends Component {
           defaultValue="Hello World"
           className={classes.input}
         />
+        <TextField
+          id="multiLine"
+          label="MultiLine"
+          multiLine
+          rows={3}
+          defaultValue="Default Value"
+          className={classes.input}
+        />
       </div>
     );
   }
 }
-

src/Input/Input.js

@@ -67,6 +67,12 @@ export const styleSheet = createStyleSheet('MuiInput', (theme) => {
         appearance: 'none',
       },
     },
+    multiLine: {
+      resize: 'none',
+      'line-height': 'inherit',
+      padding: '0px',
+      'margin-top': '12px',
+    },
     disabled: {
       color: theme.palette.text.disabled,
       cursor: 'not-allowed',
@@ -97,6 +103,10 @@ export default class Input extends Component {
       PropTypes.string,
       PropTypes.func,
     ]),
+    /**
+     * The default value for the string
+     */
+    defaultValue: PropTypes.string,
     /**
      * If `true`, the input will be disabled.
      */
@@ -113,6 +123,10 @@ export default class Input extends Component {
      * The CSS class name of the input element.
      */
     inputClassName: PropTypes.string,
+    /**
+     * If true, a textarea element will be rendered.
+     */
+    multiLine: PropTypes.bool,
     /**
      * @ignore
      */
@@ -133,6 +147,10 @@ export default class Input extends Component {
      * @ignore
      */
     onFocus: PropTypes.func,
+    /**
+     * Number of rows to display when multiLine option is set to true.
+     */
+    rows: PropTypes.number,
     /**
      * Type of the input element. It should be a valid HTML5 input type.
      */
@@ -152,6 +170,7 @@ export default class Input extends Component {
     disabled: false,
     type: 'text',
     disableUnderline: false,
+    multiLine: false,
   };
 
   static contextTypes = {
@@ -238,10 +257,12 @@ export default class Input extends Component {
     const {
       className: classNameProp,
       component: ComponentProp,
-      inputClassName: inputClassNameProp,
+      defaultValue,
       disabled,
       disableUnderline,
       error: errorProp,
+      inputClassName: inputClassNameProp,
+      multiLine,
       onBlur, // eslint-disable-line no-unused-vars
       onFocus, // eslint-disable-line no-unused-vars
       onChange, // eslint-disable-line no-unused-vars
@@ -265,6 +286,7 @@ export default class Input extends Component {
     }, classNameProp);
 
     const inputClassName = classNames(classes.input, {
+      [classes.multiLine]: multiLine,
       [classes.underline]: !disableUnderline,
       [classes.disabled]: disabled,
     }, inputClassNameProp);
@@ -280,6 +302,7 @@ export default class Input extends Component {
           onFocus={this.handleFocus}
           onChange={this.handleChange}
           disabled={disabled}
+          defaultValue={defaultValue}
           aria-required={required ? true : undefined}
           {...other}
         />

src/Input/Input.spec.js

@@ -33,6 +33,12 @@ describe('<Input />', () => {
       'should not have the area-required prop');
   });
 
+  it('should render an <textarea /> inside the div when passed component="textarea"', () => {
+    const wrapper = shallow(<Input component="textarea" />);
+    const input = wrapper.find('textarea');
+    assert.strictEqual(input.is('textarea'), true, 'should be a <input>');
+  });
+
   it('should render a disabled <input />', () => {
     const wrapper = shallow(<Input disabled />);
     const input = wrapper.find('input');

src/TextField/TextField.js

@@ -17,6 +17,10 @@ export default class TextField extends Component {
      * The CSS class name of the root element.
      */
     className: PropTypes.string,
+    /**
+     * The default value for the TextField
+     */
+    defaultValue: PropTypes.string,
     /**
      * If `true`, the input will be disabled.
      */
@@ -45,6 +49,10 @@ export default class TextField extends Component {
      * The CSS class name of the label element.
      */
     labelClassName: PropTypes.string,
+    /**
+     * If true, a textarea element will be rendered.
+     */
+    multiLine: PropTypes.bool,
     /**
      * Name attribute of the `Input` element.
      */
@@ -53,6 +61,10 @@ export default class TextField extends Component {
      * If `true`, the label is displayed as required.
      */
     required: PropTypes.bool,
+    /**
+     * Number of rows to display when multiLine option is set to true.
+     */
+    rows: PropTypes.number,
     /**
      * Type attribute of the `Input` element. It should be a valid HTML5 input type.
      */
@@ -81,6 +93,7 @@ export default class TextField extends Component {
   render() {
     const {
       className,
+      defaultValue,
       disabled,
       error,
       inputClassName,
@@ -90,6 +103,8 @@ export default class TextField extends Component {
       name,
       required,
       type,
+      multiLine,
+      rows,
       value,
       ...other
     } = this.props;
@@ -108,10 +123,14 @@ export default class TextField extends Component {
         )}
         <Input
           className={inputClassName}
-          value={value}
+          component={multiLine ? 'textarea' : 'input'}
+          defaultValue={defaultValue}
+          disabled={disabled}
+          multiLine={multiLine}
           name={name}
+          rows={rows}
           type={type}
-          disabled={disabled}
+          value={value}
           {...inputProps}
         />
       </FormControl>

src/TextField/TextField.spec.js

@@ -32,6 +32,11 @@ describe('<TextField />', () => {
       assert.strictEqual(wrapper.childAt(0).is('Input'), true);
     });
 
+    it('should render an Input with component="textarea" when passed the multiLine prop', () => {
+      wrapper = shallow(<TextField multiLine />);
+      assert.strictEqual(wrapper.childAt(0).prop('component'), 'textarea');
+    });
+
     it('should pass inputClassName to the Input as className', () => {
       wrapper.setProps({ inputClassName: 'foo' });
       assert.strictEqual(wrapper.find('Input').hasClass('foo'), true);

test/regressions/tests/TextField/TextFieldMultiLine.js

@@ -0,0 +1,17 @@
+// @flow weak
+
+import React from 'react';
+import TextField from 'material-ui/TextField';
+
+export default function TextFieldError() {
+  return (
+    <div>
+      <TextField
+        label="Foo"
+        multiLine
+        rows={4}
+        value="Default text"
+      />
+    </div>
+  );
+}