Merge branch 'master' of https://github.com/davidkpiano/react-redux-form

Author: deptno

docs/api/Form.md

@@ -235,3 +235,28 @@ _(Function)_ Called every time a `submit` event is emitted from the form.
 
 ### Notes
 - This is most useful for use with `<LocalForm>`, and is primarily intended for `<LocalForm>`.
+
+## `hideNativeErrors={true}`
+_(Boolean)_ Indicates whether native HTML5 constraint validation error messages should be shown. This does not preclude the form from failing to submit if native validation fails.
+
+(since: 1.14.0)
+
+```jsx
+// native errors will NOT show
+// <Errors /> will show when touched (or submit button clicked) as expected
+<Form model="user" hideNativeErrors>
+  <Control.text
+    model=".email"
+    type="email"
+  />
+  <Errors
+    model=".email"
+    messages={{
+      valueMissing: 'Hey, where is your email?',
+      typeMismatch: 'Not a valid email!'
+    }}
+    show="touched"
+  />
+  <button>Submit!</button>
+</Form>
+```

docs/guides/faqs.md

@@ -174,7 +174,29 @@ You will also get the native HTML5 constraint validation with these, as if you w
 
 You might think that `noValidate` will solve this issue, but according to the [W3 spec for `noValidate`](https://dev.w3.org/html5/spec-preview/form-submission.html#attr-fs-novalidate), it does _not_ prevent a form from being submitted if the form is invalid due to HTML5 constraint validity. RRF follows the spec closely with regard to this behavior.
 
-Instead, use the native `onInvalid` handler to prevent the native HTML5 validation message from displaying:
+To solve this, since version 0.14.0, the `hideNativeErrors` prop can be used to indicate that you do not want native HTML5 constraint validation messages appearing. This will still retain the behavior that if a control is invalid due to HTML5 validation, the form will fail to submit:
+
+```jsx
+// native errors will NOT show
+// <Errors /> will show when touched (or submit button clicked) as expected
+<Form model="user" hideNativeErrors>
+  <Control.text
+    model=".email"
+    type="email"
+  />
+  <Errors
+    model=".email"
+    messages={{
+      valueMissing: 'Hey, where is your email?',
+      typeMismatch: 'Not a valid email!'
+    }}
+    show="touched"
+  />
+  <button>Submit!</button>
+</Form>
+```
+
+Using `hideNativeErrors` is the recommended way to solve this. However, if you want to prevent HTML5 validation messages from showing on individual controls, use the native `onInvalid` handler to prevent the native HTML5 validation message from displaying:
 
 ```jsx
 <Control.text

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-redux-form",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "description": "Create Forms Easily with React and Redux",
   "main": "lib/index.js",
   "typings": "react-redux-form.d.ts",
@@ -97,8 +97,8 @@
     "shallow-compare": "1.2.1"
   },
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0",
-    "react-dom": "^0.14.7 || ^15.0.0",
+    "react": "^0.14.0 || ^15.0.0 || ^16.0.0",
+    "react-dom": "^0.14.7 || ^15.0.0 || ^16.0.0",
     "react-redux": "^4.0.0 || ^5.0.3",
     "redux": "^3.0.0"
   }

src/components/control-component.js

@@ -400,6 +400,13 @@ function createControlClass(s = defaultStrategy) {
             return;
           }
           case 'validate':
+          case 'reset':
+            if (intent.type === 'reset') {
+              this.setViewValue(modelValue);
+              if (this.handleUpdate.cancel) {
+                this.handleUpdate.cancel();
+              }
+            }
             if (containsEvent(validateOn, 'change')) {
               this.validate({ clearIntents: intent });
             }
@@ -568,23 +575,27 @@ function createControlClass(s = defaultStrategy) {
         dispatch,
       } = this.props;
 
-      if (!validators && !errorValidators) return modelValue;
-      if (!fieldValue) return modelValue;
+      if ((!validators && !errorValidators && !this.willValidate) || !fieldValue) {
+        return;
+      }
 
       const fieldValidity = getValidity(validators, modelValue);
       const fieldErrors = getValidity(errorValidators, modelValue);
+      const nodeErrors = this.getNodeErrors();
 
-      const errors = validators
+      let errors = validators
         ? merge(invertValidity(fieldValidity), fieldErrors)
         : fieldErrors;
 
+      if (this.willValidate) {
+        errors = merge(errors, nodeErrors);
+      }
+
       if (!shallowEqual(errors, fieldValue.errors)) {
         dispatch(mergeOrSetErrors(model, errors, options));
       } else if (options.clearIntents) {
         dispatch(actions.clearIntents(model, options.clearIntents));
       }
-
-      return modelValue;
     }
 
     render() {

src/components/form-component.js

@@ -50,6 +50,7 @@ const propTypes = {
   getRef: PropTypes.func,
   getDispatch: PropTypes.func,
   onBeforeSubmit: PropTypes.func,
+  hideNativeErrors: PropTypes.bool,
 
   // standard HTML attributes
   action: PropTypes.string,
@@ -367,6 +368,8 @@ function createFormClass(s = defaultStrategy) {
         component,
         children,
         formValue,
+        hideNativeErrors,
+        noValidate,
       } = this.props;
 
       const allowedProps = omit(this.props, disallowedPropTypeKeys);
@@ -380,6 +383,7 @@ function createFormClass(s = defaultStrategy) {
           onSubmit: this.handleSubmit,
           onReset: this.handleReset,
           ref: this.attachNode,
+          noValidate: hideNativeErrors || noValidate,
         }, renderableChildren);
     }
   }

src/reducers/form-actions-reducer.js

@@ -22,7 +22,7 @@ import getFormValue from '../utils/get-form-value';
 const resetFieldState = (field, customInitialFieldState) => {
   if (!isPlainObject(field)) return field;
 
-  const intents = [{ type: 'validate' }];
+  const intents = [{ type: 'reset' }];
   let resetValue = getMeta(field, 'initialValue');
   const loadedValue = getMeta(field, 'loadedValue');
 

src/utils/debounce.js

@@ -18,5 +18,10 @@ export default function debounce(func, delay) {
     if (laterFunc) laterFunc();
   };
 
+  debouncedFunc.cancel = () => {
+    clearTimeout(timeout);
+    laterFunc = undefined;
+  };
+
   return debouncedFunc;
 }

test/control-component-spec.js

@@ -2144,6 +2144,66 @@ Object.keys(testContexts).forEach((testKey) => {
         assert.equal(get(store.getState().test, 'foo'), 'debounced');
         assert.equal(input.value, 'debounced');
       });
+
+      it('should cancel debounced changes when control is reset', (done) => {
+        const initialState = getInitialState({ foo: 'bar' });
+        const store = testCreateStore({
+          test: modelReducer('test', initialState),
+          testForm: formReducer('test', initialState),
+        });
+
+        const control = testRender(
+          <Control.text
+            model="test.foo"
+            debounce={10}
+          />, store);
+
+        const input = TestUtils.findRenderedDOMComponentWithTag(control, 'input');
+        input.value = 'debounced';
+
+        TestUtils.Simulate.change(input);
+
+        store.dispatch(actions.reset('test'));
+
+        setTimeout(() => {
+          assert.equal(get(store.getState().test, 'foo'), 'bar');
+          assert.equal(input.value, 'bar');
+          done();
+        }, 20);
+      });
+
+      it('should cancel debounced changes when control is reset then unmounted', (done) => {
+        const initialState = getInitialState({ foo: 'bar' });
+        const store = testCreateStore({
+          test: modelReducer('test', initialState),
+          testForm: formReducer('test', initialState),
+        });
+
+        const container = document.createElement('div');
+
+        const control = ReactDOM.render(
+          <Provider store={store}>
+            <Control.text
+              model="test.foo"
+              debounce={10}
+            />
+          </Provider>,
+        container);
+
+        const input = TestUtils.findRenderedDOMComponentWithTag(control, 'input');
+        input.value = 'debounced';
+
+        TestUtils.Simulate.change(input);
+
+        store.dispatch(actions.reset('test'));
+        ReactDOM.unmountComponentAtNode(container);
+
+        setTimeout(() => {
+          assert.equal(get(store.getState().test, 'foo'), 'bar');
+          assert.equal(input.value, 'bar');
+          done();
+        }, 20);
+      });
     });
 
     describe('persist prop', () => {

test/field-actions-spec.js

@@ -180,10 +180,10 @@ Object.keys(testContexts).forEach((testKey) => {
 
         const resetState = reducer(undefined, actions.reset('test'));
 
-        assert.include(resetState.$form.intents, { type: 'validate' });
+        assert.include(resetState.$form.intents, { type: 'reset' });
 
-        assert.include(resetState.button.$form.intents, { type: 'validate' },
-          'should intend to revalidate subfields');
+        assert.include(resetState.button.$form.intents, { type: 'reset' },
+          'should intend to revalidate subfields (handled with reset)');
       });
     });