Add autoresize to multiline inputs

This fixes #278

components/input/Input.js

@@ -54,10 +54,44 @@ const factory = (FontIcon) => {
       type: 'text'
     };
 
+    componentDidMount () {
+      window.addEventListener('resize', this.handleAutoresize);
+    }
+
+    componentWillReceiveProps (nextProps) {
+      if (!this.props.multiline && nextProps.multiline) {
+        window.addEventListener('resize', this.handleAutoresize);
+      } else if (this.props.multiline && !nextProps.multiline) {
+        window.removeEventListener('resize', this.handleAutoresize);
+      }
+    }
+
+    componentWillUnmount () {
+      window.removeEventListener('resize', this.handleAutoresize);
+    }
+
     handleChange = (event) => {
+      if (this.props.multiline) {
+        this.handleAutoresize();
+      }
       if (this.props.onChange) this.props.onChange(event.target.value, event);
     };
 
+    handleAutoresize = () => {
+      const element = this.refs.input;
+      // compute the height difference between inner height and outer height
+      const style = getComputedStyle(element, null);
+      let heightOffset = 0;
+      if (style.boxSizing === 'content-box') {
+        heightOffset = -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom));
+      } else {
+        heightOffset = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
+      }
+      // resize the input to its content size
+      element.style.height = 'auto';
+      element.style.height = `${element.scrollHeight + heightOffset}px`;
+    }
+
     blur () {
       this.refs.input.blur();
     }

docs/app/components/layout/main/modules/examples/input_example_1.txt

@@ -1,5 +1,5 @@
 class InputTest extends React.Component {
-  state = { name: '', phone: '', email: '', hint: '' };
+  state = { name: '', phone: '', multiline: '', email: '', hint: '' };
 
   handleChange = (name, value) => {
     this.setState({...this.state, [name]: value});
@@ -10,6 +10,7 @@ class InputTest extends React.Component {
       <section>
         <Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} maxLength={16 } />
         <Input type='text' label='Disabled field' disabled />
+        <Input type='text' multiline label='Multiline' onChange={this.handleChange.bind(this, 'multiline')} />
         <Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
         <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this.handleChange.bind(this, 'phone')} />
         <Input type='text' value={this.state.hint} label='Required Field' hint='With Hint' required onChange={this.handleChange.bind(this, 'hint')} icon={<span>J</span>} />