From 518ba60b3a0b29213d9f9cce412b178513435719 Mon Sep 17 00:00:00 2001
From: Esteban Brenes <esteban.brenes@prodigious.com>
Date: Thu, 30 Mar 2017 23:37:31 -0600
Subject: [PATCH] Fix for #76 - Added unit test for tab index - Added
 documentation - Added examples

---
 README.md          |  4 ++++
 example/app.jsx    | 35 +++++++++++++++++++++++++++++++++++
 src/index.jsx      |  5 ++++-
 test/core.test.jsx | 18 ++++++++++++++++++
 4 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 456a0e6..1d03e8b 100755
--- a/README.md
+++ b/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:**
 
diff --git a/example/app.jsx b/example/app.jsx
index 06a74b6..7fc5014 100755
--- a/example/app.jsx
+++ b/example/app.jsx
@@ -390,6 +390,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>;
   }
 });
diff --git a/src/index.jsx b/src/index.jsx
index d71e97b..786e7d5 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -265,7 +265,8 @@ export default React.createClass({
     children: React.PropTypes.oneOfType([
       React.PropTypes.arrayOf(React.PropTypes.node),
       React.PropTypes.node
-    ])
+    ]),
+    tabIndex: React.PropTypes.number
   },
 
   getDefaultProps() {
@@ -590,6 +591,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}
@@ -606,6 +608,7 @@ export default React.createClass({
           onBlur={this.handleBlur}
           onChange={this.handleInputChange}
           autoComplete={this.props.autoComplete}
+          tabIndex={this.props.tabIndex}
           />;
 
     return <InputGroup
diff --git a/test/core.test.jsx b/test/core.test.jsx
index 1bc9e46..8c47d36 100755
--- a/test/core.test.jsx
+++ b/test/core.test.jsx
@@ -1061,4 +1061,22 @@ describe("Date Picker", function() {
     assert.equal(document.querySelector("table thead tr:first-child td small").innerHTML, "Sat");
     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);
+  }));
 });