Fix for #76, add tabindex attribute to input element

README.md

@@ -198,6 +198,10 @@ DatePicker component. Renders as a [React-Bootstrap InputGroup](https://react-bo
     * **Optional**
     * **Type:** `React.Component`
     * **Example:** `<CustomControl />`
+  * `tabIndex` - The tabIndex specifies the tab order of the input element. If a `customControl` is used, this property is passed down to it as well.
+    * **Optional**
+    * **Type:** `number`
+    * **Example:** `2`
 
 * **Methods:**
 

example/app.jsx

@@ -422,6 +422,41 @@ const App = React.createClass({
           </FormGroup>
         </Col>
       </Row>
+      <Row>
+        <Col xs={12}>
+          <h2>Tab Indexes</h2>
+        </Col>
+      </Row>
+      <Row>
+        <Col sm={3}>
+          <FormGroup>
+            <ControlLabel>Third</ControlLabel>
+            <DatePicker placeholder="Placeholder" tabIndex={103} />
+            <HelpBlock>The focus will jump here after Second</HelpBlock>
+          </FormGroup>
+        </Col>
+        <Col sm={3}>
+          <FormGroup>
+            <ControlLabel>Second</ControlLabel>
+            <DatePicker placeholder="Placeholder" tabIndex={102} />
+            <HelpBlock>The focus will jump here after First.</HelpBlock>
+          </FormGroup>
+        </Col>
+        <Col sm={3}>
+          <FormGroup>
+            <ControlLabel>Fourth</ControlLabel>
+            <DatePicker placeholder="Placeholder" tabIndex={104} />
+            <HelpBlock>The focus will jump here after Third</HelpBlock>
+          </FormGroup>
+        </Col>
+        <Col sm={3}>
+          <FormGroup>
+            <ControlLabel>First</ControlLabel>
+            <DatePicker placeholder="Placeholder" tabIndex={101} />
+            <HelpBlock>Focus on this element to start!</HelpBlock>
+          </FormGroup>
+        </Col>
+      </Row>
     </Grid>;
   }
 });

src/index.jsx

@@ -268,7 +268,8 @@ export default React.createClass({
     children: React.PropTypes.oneOfType([
       React.PropTypes.arrayOf(React.PropTypes.node),
       React.PropTypes.node
-    ])
+    ]),
+    tabIndex: React.PropTypes.number
   },
 
   getDefaultProps() {
@@ -612,6 +613,7 @@ export default React.createClass({
         className: this.props.className,
         style: this.props.style,
         autoComplete: this.props.autoComplete,
+        tabIndex: this.props.tabIndex
       })
       : <FormControl
           onKeyDown={this.handleKeyDown}
@@ -628,6 +630,7 @@ export default React.createClass({
           onBlur={this.handleBlur}
           onChange={this.handleInputChange}
           autoComplete={this.props.autoComplete}
+          tabIndex={this.props.tabIndex}
           />;
 
     return <InputGroup

test/core.test.jsx

@@ -1100,4 +1100,22 @@ describe("Date Picker", function() {
     assert.notEqual(popover, null);
     ReactDOM.unmountComponentAtNode(container);
   }));
+  it("should set a tabindex on the input control", co.wrap(function *(){
+    const id = UUID.v4();
+    const App = React.createClass({
+      render: function(){
+        return <div>
+              <DatePicker id={id} tabIndex={101} />
+            </div>;
+      }
+    });
+    yield new Promise(function(resolve, reject){
+      ReactDOM.render(<App />, container, resolve);
+    });
+    const inputElement = document.querySelector("input.form-control");
+    TestUtils.Simulate.focus(inputElement);
+    assert.notEqual(inputElement, null);
+    assert.equal(inputElement.getAttribute('tabindex'), 101);
+    ReactDOM.unmountComponentAtNode(container);
+  }));
 });