Merge pull request #87 from OtaK/feature/textarea-input

Added ability to change <input> to <textarea> from a boolean flag

Author: fmoo

README.md

@@ -82,6 +82,12 @@ Type: `String`
 
 Placeholder text for the typeahead input.
 
+#### props.textarea
+
+Type: `Boolean`
+
+Set to `true` to use a `<textarea>` element rather than an `<input>` element
+
 #### props.inputProps
 
 Type: `Object`

src/typeahead/index.js

@@ -28,6 +28,7 @@ var Typeahead = React.createClass({
     allowCustomValues: React.PropTypes.number,
     defaultValue: React.PropTypes.string,
     placeholder: React.PropTypes.string,
+    textarea: React.PropTypes.bool,
     inputProps: React.PropTypes.object,
     onOptionSelected: React.PropTypes.func,
     onChange: React.PropTypes.func,
@@ -56,6 +57,7 @@ var Typeahead = React.createClass({
       allowCustomValues: 0,
       defaultValue: "",
       placeholder: "",
+      textarea: false,
       inputProps: {},
       onOptionSelected: function(option) {},
       onChange: function(event) {},
@@ -290,10 +292,12 @@ var Typeahead = React.createClass({
     classes[this.props.className] = !!this.props.className;
     var classList = classNames(classes);
 
+    var InputElement = this.props.textarea ? 'textarea' : 'input';
+
     return (
       <div className={classList}>
         { this._renderHiddenInput() }
-        <input ref="entry" type="text"
+        <InputElement ref="entry" type="text"
           {...this.props.inputProps}
           placeholder={this.props.placeholder}
           className={inputClassList}

test/typeahead-test.js

@@ -474,5 +474,26 @@ describe('Typeahead Component', function() {
         });
       });
     });
+
+    context('textarea', function() {
+      it('should render a <textarea> input', function() {
+        var component = TestUtils.renderIntoDocument(<Typeahead
+          options={ BEATLES }
+          textarea={ true }
+        />);
+
+        var input = component.refs.entry.getDOMNode();
+        assert.equal(input.tagName.toLowerCase(), 'textarea');
+      });
+
+      it('should render a <input> input', function() {
+        var component = TestUtils.renderIntoDocument(<Typeahead
+          options={ BEATLES }
+        />);
+
+        var input = component.refs.entry.getDOMNode();
+        assert.equal(input.tagName.toLowerCase(), 'input');
+      });
+    })
   });
 });