Merge pull request react-bootstrap#274 from trentgrover-wf/fileInput

File input is incorrectly wrapped in a border box

Author: stevoland

docs/examples/InputTypes.js

@@ -2,21 +2,23 @@
 
 var inputTypeInstance = (
     <form>
-      <Input type="text" defaultValue="text" />
-      <Input type="password" defaultValue="secret" />
-      <Input type="checkbox" checked readOnly label="checkbox"/>
-      <Input type="radio" checked readOnly label="radio"/>
-      <Input type="select" defaultValue="select">
+      <Input type="text" label='Text' defaultValue="Enter text" />
+      <Input type="email" label='Email Address' defaultValue="Enter email" />
+      <Input type="password" label='Password' defaultValue="secret" />
+  	  <Input type="file" label="File" help="[Optional] Block level help text" />
+      <Input type="checkbox" label="Checkbox" checked readOnly />
+      <Input type="radio" label="Radio" checked readOnly />
+      <Input type="select" label='Select' defaultValue="select">
         <option value="select">select</option>
         <option value="other">...</option>
       </Input>
-      <Input type="select" multiple>
+      <Input type="select" label='Multiple Select' multiple>
         <option value="select">select (multiple)</option>
         <option value="other">...</option>
       </Input>
-      <Input type="textarea" defaultValue="textarea" />
-      <Input type="static" value="static" />
-      <Input type="submit" bsStyle='primary' value="Submit button" />
+      <Input type="textarea" label='Text Area' defaultValue="textarea" />
+      <Input type="static" value="Static Text" />
+      <Input type="submit" value="Submit button" />
     </form>
   );
 

src/Input.jsx

@@ -51,6 +51,10 @@ var Input = React.createClass({
     return this.props.type === 'radio' || this.props.type === 'checkbox';
   },
 
+  isFile: function () {
+    return this.props.type === 'file';
+  },
+
   renderInput: function () {
     var input = null;
 
@@ -82,7 +86,7 @@ var Input = React.createClass({
         );
         break;
       default:
-        var className = this.isCheckboxOrRadio() ? '' : 'form-control';
+        var className = this.isCheckboxOrRadio() || this.isFile() ? '' : 'form-control';
         input = <input className={className} ref="input" key="input" />;
     }
 

test/InputSpec.jsx

@@ -137,6 +137,21 @@ describe('Input', function () {
     assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'form-control-feedback'));
   });
 
+  it('renders file correctly', function () {
+    var instance = ReactTestUtils.renderIntoDocument(
+      <Input type="file" wrapperClassName="wrapper" label="Label" help="h" />
+    );
+
+    var node = instance.getDOMNode();
+    assert.include(node.className, 'form-group');
+    assert.equal(node.children[0].tagName.toLowerCase(), 'label');
+    assert.include(node.children[1].className, 'wrapper');
+    assert.equal(node.children[1].children[0].tagName.toLowerCase(), 'input');
+    assert.equal(node.children[1].children[0].className, '');
+    assert.equal(node.children[1].children[0].type, 'file');
+    assert.equal(node.children[1].children[1].className, 'help-block');
+  });
+
   it('renders checkbox/radio correctly', function () {
     var instance = ReactTestUtils.renderIntoDocument(
       <Input type="checkbox" wrapperClassName="wrapper" label="Label" help="h" />