Ensuring that unmounting a component is subtractive, not additive, w/r/t validity (and HTML5 validation attributes). Fixes #580

Author: davidkpiano

src/actions/field-actions.js

@@ -11,7 +11,6 @@ import { trackable } from '../utils/track';
 import getForm from '../utils/get-form';
 import getFieldFromState from '../utils/get-field-from-state';
 import NULL_ACTION from '../constants/null-action';
-import omit from '../utils/omit';
 import isNative from '../utils/is-native';
 import invariant from 'invariant';
 
@@ -86,28 +85,11 @@ function createFieldActions(s = defaultStrategies) {
     [options.errors ? 'errors' : 'validity']: validity,
   });
 
-  const resetValidity = (model, omitKeys = false) => {
-    if (!omitKeys) {
-      return {
-        type: actionTypes.RESET_VALIDITY,
-        model,
-      };
-    }
-
-    return (dispatch, getState) => {
-      const field = s.getFieldFromState(getState(), model);
-
-      if (!field) {
-        dispatch(NULL_ACTION);
-      } else {
-        dispatch({
-          type: actionTypes.SET_VALIDITY,
-          model,
-          validity: omit(field.validity, omitKeys),
-        });
-      }
-    };
-  };
+  const resetValidity = (model, omitKeys = false) => ({
+    type: actionTypes.RESET_VALIDITY,
+    model,
+    omitKeys,
+  });
 
   const setFieldsValidity = (model, fieldsValidity, options = {}) => ({
     type: actionTypes.SET_FIELDS_VALIDITY,

src/components/control-component.js

@@ -140,6 +140,8 @@ function createControlClass(customControlPropsMap = {}, s = defaultStrategy) {
       this.attachNode = this.attachNode.bind(this);
       this.readOnlyValue = isReadOnlyValue(props.controlProps);
 
+      this.willValidate = false;
+
       this.state = {
         viewValue: props.modelValue,
       };
@@ -179,7 +181,7 @@ function createControlClass(customControlPropsMap = {}, s = defaultStrategy) {
 
       if (fieldValue && !fieldValue.valid) {
         const keys = Object.keys(validators)
-          .concat(Object.keys(errors));
+          .concat(Object.keys(errors), this.willValidate ? validityKeys : []);
 
         dispatch(actions.setValidity(model, omit(fieldValue.validity, keys)));
       }
@@ -319,9 +321,12 @@ function createControlClass(customControlPropsMap = {}, s = defaultStrategy) {
       } = this;
 
       if (!node || !node.willValidate) {
+        this.willValidate = false;
         return null;
       }
 
+      this.willValidate = true;
+
       const nodeErrors = {};
 
       validityKeys.forEach((key) => {

src/reducers/form-actions-reducer.js

@@ -194,10 +194,23 @@ export default function formActionsReducer(state, action, localPath) {
     }
 
     case actionTypes.RESET_VALIDITY: {
+      let validity = { ...fieldState.validity };
+      let errors = { ...fieldState.errors };
+
+      if (action.omitKeys) {
+        action.omitKeys.forEach((key) => {
+          delete validity[key];
+          delete errors[key];
+        });
+      } else {
+        validity = initialFieldState.validity;
+        errors = initialFieldState.errors;
+      }
+
       fieldUpdates = {
         valid: initialFieldState.valid,
-        validity: initialFieldState.validity,
-        errors: initialFieldState.errors,
+        validity,
+        errors,
       };
 
       subFieldUpdates = {