title: my input don´t get mark as touched anymore when using onBlur event on my input: redux-form
body: <p>i am using redux-form on a react project and try to add some custom class on my input depending on its state. the problem is that when i use the onBlur event, my input doesn´t get mark as touched anymore and i cannot display the error. i then get back false for this.props.hasError although the input was blured.
  I would really be gratefull if someone could help me. Thanks</p>
  
  <pre><code>class FormInput extends Component {
      constructor(props) {
          super(props);
          this.state = {
              focusState:  false,
              blurState: false
          }
          this.inputFocus = this.inputFocus.bind(this);
          this.renderTheBorder = this.renderTheBorder.bind(this);
          this.inputBlur = this.inputBlur.bind(this)
      }
  
      inputFocus() {
          this.setState({
              focusState: true,
              blurState: false
          })
      }
  
      inputBlur() {
          return this.setState({
              focusState: false,
              blurState: true
          }
      }
  
      renderTheBorder() {
          if (!this.state.focusState &amp;&amp; !this.state.blurState)  {
              return &lt;div className={`input__state `}&gt;&lt;/div&gt;
          }
          else if ( this.state.focusState &amp;&amp; !this.state.blurState ){
              return &lt;div className={`input__state state__focus `}&gt;&lt;/div&gt;
          }
          else if (!this.state.focusState &amp;&amp; this.state.blurState) {
              return &lt;div className={`input__state state__leaveRigth `}&gt;&lt;/div&gt;
          }
      }
  
      render () {
          const {url, className, type, placeholder, inputStyle } = this.props;
          const {input, error, hasError } = this.props;
  
          console.log('hasError: ', hasError)
          return (
              &lt;div className={className} style={{backgroundImage: `url(${url})` }} &gt;
                  &lt;input type={type} 
                      className={inputStyle} 
                      placeholder={placeholder}
                      {...input} 
                      onFocus={this.inputFocus}
                      onBlur={this.inputBlur} /&gt;
                      &lt;div className="initial__state"&gt;
                          {this.renderTheBorder()}
                      &lt;/div&gt;
                  { hasError ? 
                     (&lt;div className ="feeback"&gt; {error} &lt;/div&gt;) : 
                     (&lt;div className ="space"&gt;&lt;/div&gt;)  
                  }
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>// here is where i render the input component and   use redux-form</p>
  
  <pre><code>class SignupForm extends Component {
      constructor(props) {
          super(props);
      }
  
      renderInputField({input, 
          meta: {touched, error, active},
          placeholder, type, url} ) {
  
          const hasError = touched &amp;&amp; !active &amp;&amp; error !== "undefined";
  
          return (
              &lt;FormInput className="login__form_input form__icons"
                  inputStyle="login__input"
                  placeholder={placeholder}
                  type={type}
                  url={url}
                  input={input}
                  hasError={hasError}
                  error={error} /&gt;
          );
  }
  
      render () {
  
          const { handleSubmit } = this.props;
  
          return (
              &lt;div style={{paddingTop: 1.5 + 'rem', paddingBottom: 1.5 + 'rem'}}&gt;
  
                  &lt;Field name="first"
                      component={this.renderInputField}
                      placeholder="First name"
                      type="text"
                      url={User}
                      validate={[reqFirstName, valFirstName]} /&gt;    
              &lt;/div&gt;
              );
          }
      }
  </code></pre>