add tabIndex prop

README.md

@@ -113,6 +113,7 @@ Displays an input field complete with custom inputs, native input, and a calenda
 |returnValue|Which dates shall be passed by the calendar to the onChange function and onClick{Period} functions. Can be `"start"`, `"end"` or `"range"`. The latter will cause an array with start and end values to be passed.|`"start"`|`"range"`|
 |showLeadingZeros|Whether leading zeros should be rendered in date inputs.|`false`|`true`|
 |value|Input value.|n/a|<ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`</li></ul>|
+|tabIndex|`tabindex` of the first input|n/a| `42`|
 |yearAriaLabel|`aria-label` for the year input.|n/a|`"Year"`|
 |yearPlaceholder|`aria-label` for the year input.|`"----"`|`"yyyy"`|
 

src/DateInput.jsx

@@ -460,6 +460,7 @@ export default class DateInput extends PureComponent {
       dayAriaLabel,
       dayPlaceholder,
       showLeadingZeros,
+      tabIndex,
     } = this.props;
     const { day, month, year } = this.state;
 
@@ -479,6 +480,7 @@ export default class DateInput extends PureComponent {
         month={month}
         placeholder={dayPlaceholder}
         showLeadingZeros={showLeadingZerosFromFormat || showLeadingZeros}
+        tabIndex={index === 0 ? tabIndex : undefined}
         value={day}
         year={year}
       />
@@ -492,6 +494,7 @@ export default class DateInput extends PureComponent {
       monthAriaLabel,
       monthPlaceholder,
       showLeadingZeros,
+      tabIndex,
     } = this.props;
     const { month, year } = this.state;
 
@@ -511,6 +514,7 @@ export default class DateInput extends PureComponent {
           placeholder={monthPlaceholder}
           short={currentMatch.length === 3}
           value={month}
+          tabIndex={index === 0 ? tabIndex : undefined}
           year={year}
         />
       );
@@ -528,13 +532,19 @@ export default class DateInput extends PureComponent {
         placeholder={monthPlaceholder}
         showLeadingZeros={showLeadingZerosFromFormat || showLeadingZeros}
         value={month}
+        tabIndex={index === 0 ? tabIndex : undefined}
         year={year}
       />
     );
   }
 
   renderYear = (currentMatch, index) => {
-    const { autoFocus, yearAriaLabel, yearPlaceholder } = this.props;
+    const {
+      autoFocus,
+      tabIndex,
+      yearAriaLabel,
+      yearPlaceholder,
+    } = this.props;
     const { year } = this.state;
 
     return (
@@ -545,6 +555,7 @@ export default class DateInput extends PureComponent {
         autoFocus={index === 0 && autoFocus}
         inputRef={this.yearInput}
         placeholder={yearPlaceholder}
+        tabIndex={index === 0 ? tabIndex : undefined}
         value={year}
         valueType={this.valueType}
       />
@@ -640,6 +651,7 @@ DateInput.propTypes = {
   required: PropTypes.bool,
   returnValue: PropTypes.oneOf(['start', 'end', 'range']),
   showLeadingZeros: PropTypes.bool,
+  tabIndex: PropTypes.number,
   value: PropTypes.oneOfType([
     isValue,
     PropTypes.arrayOf(isValue),

src/DateInput/DayInput.jsx

@@ -58,6 +58,7 @@ DayInput.propTypes = {
   placeholder: PropTypes.string,
   required: PropTypes.bool,
   showLeadingZeros: PropTypes.bool,
+  tabIndex: PropTypes.number,
   value: PropTypes.string,
   year: PropTypes.string,
 };

src/DateInput/Input.jsx

@@ -108,6 +108,7 @@ export default function Input({
   required,
   showLeadingZeros,
   step,
+  tabIndex,
   value,
 }) {
   const hasLeadingZero = (
@@ -151,6 +152,7 @@ export default function Input({
       ref={mergeRefs(updateInputWidth, updateInputWidthOnFontLoad, inputRef)}
       required={required}
       step={step}
+      tabIndex={tabIndex}
       type="number"
       value={value !== null ? value : ''}
     />,
@@ -174,5 +176,6 @@ Input.propTypes = {
   required: PropTypes.bool,
   showLeadingZeros: PropTypes.bool,
   step: PropTypes.number,
+  tabIndex: PropTypes.number,
   value: PropTypes.string,
 };

src/DateInput/MonthInput.jsx

@@ -43,6 +43,7 @@ MonthInput.propTypes = {
   placeholder: PropTypes.string,
   required: PropTypes.bool,
   showLeadingZeros: PropTypes.bool,
+  tabIndex: PropTypes.number,
   value: PropTypes.string,
   year: PropTypes.string,
 };

src/DateInput/MonthSelect.jsx

@@ -81,6 +81,7 @@ MonthSelect.propTypes = {
   placeholder: PropTypes.string,
   required: PropTypes.bool,
   short: PropTypes.bool,
+  tabIndex: PropTypes.number,
   value: PropTypes.string,
   year: PropTypes.string,
 };

src/DateInput/YearInput.jsx

@@ -54,6 +54,7 @@ YearInput.propTypes = {
   onKeyUp: PropTypes.func,
   placeholder: PropTypes.string,
   required: PropTypes.bool,
+  tabIndex: PropTypes.number,
   value: PropTypes.string,
   valueType: isValueType,
 };

src/DatePicker.jsx

@@ -152,6 +152,7 @@ export default class DatePicker extends PureComponent {
       required,
       returnValue,
       showLeadingZeros,
+      tabIndex,
       value,
       yearAriaLabel,
       yearPlaceholder,
@@ -192,6 +193,7 @@ export default class DatePicker extends PureComponent {
           required={required}
           returnValue={returnValue}
           showLeadingZeros={showLeadingZeros}
+          tabIndex={tabIndex}
           value={valueFrom}
         />
         {clearIcon !== null && (
@@ -368,6 +370,7 @@ DatePicker.propTypes = {
   required: PropTypes.bool,
   returnValue: PropTypes.oneOf(['start', 'end', 'range']),
   showLeadingZeros: PropTypes.bool,
+  tabIndex: PropTypes.number,
   value: PropTypes.oneOfType([
     isValue,
     PropTypes.arrayOf(isValue),