Ensure validation sends modelValue if validateOn is not an updateOn event. Fixes #428

Author: davidkpiano

src/components/control-component.js

@@ -227,20 +227,27 @@ function createControlClass(customControlPropsMap = {}, defaultProps = {}) {
       return changeAction(model, getValue(value));
     }
 
-    getValidateAction(value) {
+    getValidateAction(value, eventName) {
       const {
         validators,
         errors,
         model,
+        modelValue,
+        updateOn,
         fieldValue,
       } = this.props;
 
       const nodeErrors = this.getNodeErrors();
 
+      // If it is not a change event, use the model value.
+      const valueToValidate = containsEvent(updateOn, eventName)
+        ? value
+        : modelValue;
+
       if (validators || errors) {
-        const fieldValidity = getValidity(validators, value);
+        const fieldValidity = getValidity(validators, valueToValidate);
         const fieldErrors = merge(
-          getValidity(errors, value),
+          getValidity(errors, valueToValidate),
           nodeErrors);
 
         const mergedErrors = validators
@@ -257,17 +264,24 @@ function createControlClass(customControlPropsMap = {}, defaultProps = {}) {
       return false;
     }
 
-    getAsyncValidateAction(value) {
+    getAsyncValidateAction(value, eventName) {
       const {
         asyncValidators,
         fieldValue,
         model,
+        modelValue,
+        updateOn,
       } = this.props;
 
       // If there are no async validators,
       // do not run async validation
       if (!asyncValidators) return false;
 
+      // If it is not a change event, use the model value.
+      const valueToValidate = containsEvent(updateOn, eventName)
+        ? value
+        : modelValue;
+
       // If any sync validity is invalid,
       // do not run async validation
       const asyncValidatorKeys = Object.keys(asyncValidators);
@@ -290,12 +304,12 @@ function createControlClass(customControlPropsMap = {}, defaultProps = {}) {
                 done(validity);
               };
 
-              validator(getValue(value), outerDone);
+              validator(getValue(valueToValidate), outerDone);
             })
           )
         );
 
-        return value;
+        return valueToValidate;
       };
     }
 
@@ -419,11 +433,11 @@ function createControlClass(customControlPropsMap = {}, defaultProps = {}) {
 
         if (containsEvent(validateOn, eventName)) {
           eventActions.push(
-            this.getValidateAction(persistedEvent));
+            this.getValidateAction(persistedEvent, eventName));
         }
 
         if (containsEvent(asyncValidateOn, eventName)) {
-          eventActions.push(this.getAsyncValidateAction(persistedEvent));
+          eventActions.push(this.getAsyncValidateAction(persistedEvent, eventName));
         }
 
         if (containsEvent(updateOn, eventName)) {

test/control-component-spec.js

@@ -682,6 +682,43 @@ Object.keys(testContexts).forEach((testKey) => {
       });
     });
 
+    describe('validateOn != updateOn', () => {
+      const initialState = {
+        foo: 'one',
+      };
+
+      const radioStore = testCreateStore({
+        testForm: formReducer('test', initialState),
+        test: modelReducer('test', initialState),
+      });
+
+      const app = TestUtils.renderIntoDocument(
+        <Provider store={radioStore}>
+          <Control.radio
+            model="test.foo"
+            value="two"
+            validateOn="focus"
+            validators={{
+              isOne: (val) => val === 'one',
+            }}
+          />
+        </Provider>
+      );
+
+      const input = TestUtils.findRenderedDOMComponentWithTag(app, 'input');
+
+      it('should initially be valid', () => {
+        assert.isTrue(radioStore.getState().testForm.foo.valid);
+      });
+
+      it('should still be valid after focusing', () => {
+        TestUtils.Simulate.focus(input);
+
+        assert.isTrue(radioStore.getState().testForm.foo.valid);
+        assert.isTrue(radioStore.getState().testForm.foo.focus);
+      });
+    });
+
     describe('asyncValidators and asyncValidateOn property', () => {
       const reducer = formReducer('test');
       const store = testCreateStore({

test/custom-control-component-spec.js

@@ -283,6 +283,8 @@ describe('custom <Control /> components', () => {
 
     const input = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
     input.value = 'testing';
+
+    TestUtils.Simulate.change(input);
     TestUtils.Simulate.blur(input);
   });
 

test/custom-field-component-spec.js

@@ -365,6 +365,7 @@ describe('custom <Field /> components with createFieldClass()', () => {
 
     const input = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
     input.value = 'testing';
+    TestUtils.Simulate.change(input);
     TestUtils.Simulate.blur(input);
   });
 });