validation fixes

src/utils/asInput.js

@@ -66,10 +66,12 @@ const asInput = (WrappedComponent) => {
     }
 
     handleBlur(event) {
+      const val = event.target.value;
+
       if (this.props.validator) {
-        this.setState(this.props.validator);
+        this.setState(this.props.validator(val));
       }
-      this.props.onBlur(event.target.value, this.props.name);
+      this.props.onBlur(val, this.props.name);
     }
 
     handleChange(event) {
@@ -103,11 +105,11 @@ const asInput = (WrappedComponent) => {
 
   NewComponent.defaultProps = {
     onChange: () => {},
+    onBlur: () => {},
     value: '',
     description: undefined,
     disabled: false,
     required: false,
-    validator: () => {},
   };
 
   return NewComponent;

stories/index.js

@@ -23,7 +23,7 @@ storiesOf('TextInput', module)
       name="username"
       label="Username"
       description="The unique name that identifies you throughout the site."
-      validate={(value) => {
+      validator={(value) => {
         let feedback = { isValid: true };
         if (value.length < 3) {
           feedback = {
@@ -97,4 +97,29 @@ storiesOf('SelectInput', module)
         },
       ]}
     />
+  ))
+  .add('with validation', () => (
+    <SelectInput
+      name="skittles"
+      label="Favorite Color"
+      options={[
+        '',
+        'red',
+        'orange',
+        'yellow',
+        'green',
+        'blue',
+        'purple',
+      ]}
+      validator={value => {
+        let feedback = { isValid: true };
+        if (!value) {
+          feedback = {
+            isValid: false,
+            validationMessage: 'Please make a selection.',
+          };
+        }
+        return feedback;
+      }}
+    />
   ));