title: How to keep sync validation with Redux-form v6 while implementing custom onBlur?
body: <p>I have a Field that needs some custom onBlur functionality, but when I implement my functionality, the normal sync validation stops working. I can still see the error getting updated within props.meta.error when I console log with componentDidUpdate, but it doesn't actually show the error.</p>
  
  <p>I've tried tinkering with manually dispatching a 'touch' action, and trying asyncValidation too, but the error field doesn't show up unless I leave the onBlur prop alone.</p>
  
  <p>Is there a way I can implement my own onBlur function, while still retaining the original error validation stuff?</p>
  
  <p>This is the component I'm making:</p>
  
  <pre><code>class PostalCodeTextInput extends React.Component { // eslint-disable-line
    fetchAddressesValid = () =&gt; {
      // this.props.async();
      if (this.props.input.value.length &gt; 5) {
        if (!this.props.meta.error) {
          this.props.fetchAddresses(this.props.input.value);
        }
      }
    }
  
    render() {
      const { helpText, input, label, type, meta: { touched, error } } = this.props;
      const classNames = classnames({
        'text-input': 'text-input',
        'form-group': 'form-group',
        invalid: touched &amp;&amp; error,
      });
      return (
        &lt;div className={classNames}&gt;
          &lt;label htmlFor={label}&gt;{label}&lt;/label&gt;
          &lt;div&gt;
            &lt;input
              {...input}
              type={type}
              placeholder={label}
              onBlur={this.fetchAddressesValid} // *
            /&gt;
            {touched &amp;&amp; error &amp;&amp; &lt;p className="warning"&gt;{error}&lt;/p&gt;}
          &lt;/div&gt;
          &lt;small&gt;&lt;em&gt;{helpText}&lt;/em&gt;&lt;/small&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>And this is the validation that's supposed to apply:</p>
  
  <pre><code>const validate = (values) =&gt; { // eslint-disable-line
    const errors = {};
  
    // NewAddressFields
    if (!values.get('postal_code')) {
      errors.postal_code = 'Required';
    } ...
  </code></pre>
  
  <p>This is what it looks like when I comment out the line:</p>
  
  <pre><code>// onBlur={this.fetchAddressesValid}
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/C72fT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C72fT.png" alt="enter image description here"></a></p>
  
  <p>And this is what it looks like when I leave the line in:</p>
  
  <pre><code>onBlur={this.fetchAddressesValid}
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/kaML3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kaML3.png" alt="enter image description here"></a></p>
  
  <p>How do I get the error message to pop up like in the first picture, while still using my own onBlur function?</p>