Updated release to v1.0.8 with fix for Input labels mapping to input id.

Author: shoaibkhan94

dist/ReactstrapFormikInput.js

@@ -1,7 +1,15 @@
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+function _objectWithoutProperties(obj, keys) {
+    var target = {};
+    for (var i in obj) {
+        if (keys.indexOf(i) >= 0) continue;
+        if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
+        target[i] = obj[i];
+    }
+    return target;
+}
 
 import React from 'react';
-import { FormFeedback, FormGroup, Input, Label } from "reactstrap";
+import {FormFeedback, FormGroup, Input, Label} from "reactstrap";
 
 var ReactstarpFormikInput = function ReactstarpFormikInput(_ref) {
     var fields = _objectWithoutProperties(_ref.field, []),
@@ -16,7 +24,7 @@ var ReactstarpFormikInput = function ReactstarpFormikInput(_ref) {
         null,
         React.createElement(
             Label,
-            { "for": fields.name, className: "label-color" },
+            {"for": props.id, className: "label-color"},
             props.label
         ),
         React.createElement(Input, Object.assign({}, props, fields, { invalid: Boolean(touched[fields.name] && errors[fields.name]) })),

dist/ReactstrapSelectInput.js

@@ -38,12 +38,13 @@ var ReactstrapSelectInput = function ReactstrapSelectInput(_ref) {
         null,
         React.createElement(
             Label,
-            { "for": field.name, className: "label-color" },
+            {"for": props.inputprops.id, className: "label-color"},
             props.label
         ),
         React.createElement(
             Input,
-            Object.assign({}, field, props, { type: "select", invalid: Boolean(touched[field.name] && errors[field.name]),
+            Object.assign({id: props.inputprops.id}, field, props, {
+                type: "select", invalid: Boolean(touched[field.name] && errors[field.name]),
                 placeholder: "Test" }),
             React.createElement(
                 "option",

src/components/ReactstrapFormikInput.js

@@ -8,7 +8,7 @@ const ReactstarpFormikInput = (
         ...props
     }) => (
     <FormGroup>
-        <Label for={fields.name} className={"label-color"}>{props.label}</Label>
+        <Label for={props.id} className={"label-color"}>{props.label}</Label>
         <Input {...props} {...fields} invalid={Boolean(touched[fields.name] && errors[fields.name])}/>
         {touched[fields.name] && errors[fields.name] ? <FormFeedback>{errors[fields.name]}</FormFeedback> : ''}
     </FormGroup>

src/components/ReactstrapSelectInput.js

@@ -21,8 +21,9 @@ const ReactstrapSelectInput = ({
     let touch = touched[field.name];
     return (
         <FormGroup>
-            <Label for={field.name} className={"label-color"}>{props.label}</Label>
-            <Input {...field} {...props} type="select" invalid={Boolean(touched[field.name] && errors[field.name])}
+            <Label for={props.inputprops.id} className={"label-color"}>{props.label}</Label>
+            <Input id={props.inputprops.id} {...field} {...props} type="select"
+                   invalid={Boolean(touched[field.name] && errors[field.name])}
                    placeholder="Test">
                 <option value="">{props.inputprops.defaultOption}</option>
                 {props.inputprops.options.map((option, index) => {

src/stories/InputStory.js

@@ -39,6 +39,7 @@ export default () => (
                                 label="Email"
                                 name="email"
                                 component={TextField}
+                                id="email"
                             />
                         </Col>
                         <Col xs="12">
@@ -47,6 +48,7 @@ export default () => (
                                 label="Password"
                                 name="password"
                                 component={TextField}
+                                id="password"
                             />
                         </Col>
                         <Col xs="12">

src/stories/SelectStory.js

@@ -48,8 +48,8 @@ export default () => (
                                 name="prefilled_country"
                                 component={SelectInput}
                                 inputprops={{
-                                    name: 'country',
-                                    id: 'country',
+                                    name: 'prefilled_country',
+                                    id: 'prefilled_country',
                                     options: ['India', 'USA', 'UK', 'Saudi Arabia'],
                                     defaultOption: "Country"
                                 }}>