Using redux-form I'm losing focus after typing the first character : <p>I'm using <code>redux-form</code> and on blur validation. After I type the first character into an input element, it loses focus and I have to click in it again to continue typing. It only does this with the first character. Subsequent characters types remains focuses. Here's my basic sign in form example:</p>

<pre><code>import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import * as actions from '../actions/authActions';

require('../../styles/signin.scss');


class SignIn extends Component {

  handleFormSubmit({ email, password }) {
    this.props.signinUser({ email, password }, this.props.location);
  }

  renderAlert() {
    if (this.props.errorMessage) {
      return (
        &lt;div className="alert alert-danger"&gt;
          {this.props.errorMessage}
        &lt;/div&gt;
      );
    } else if (this.props.location.query.error) {
      return (
        &lt;div className="alert alert-danger"&gt;
          Authorization required!
        &lt;/div&gt;
      );
    }
  }

  render() {

    const { message, handleSubmit, prestine, reset, submitting } = this.props;

    const renderField = ({ input, label, type, meta: { touched, invalid, error } }) =&gt; (
      &lt;div class={`form-group ${touched &amp;&amp; invalid ? 'has-error' : ''}`}&gt;
        &lt;label for={label} className="sr-only"&gt;{label}&lt;/label&gt;
        &lt;input {...input} placeholder={label} type={type} className="form-control" /&gt;
        &lt;div class="text-danger"&gt;
          {touched ? error: ''}
        &lt;/div&gt;
      &lt;/div&gt;
    );


    return (
      &lt;div className="row"&gt;
        &lt;div className="col-md-4 col-md-offset-4"&gt;
          &lt;form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))} className="form-signin"&gt;
            &lt;h2 className="form-signin-heading"&gt;
              Please sign in
            &lt;/h2&gt;
            {this.renderAlert()}
            &lt;Field name="email" type="text" component={renderField} label="Email Address" /&gt;
            &lt;Field name="password" type="password" component={renderField} label="Password" /&gt;
            &lt;button action="submit" className="btn btn-lg btn-primary btn-block"&gt;Sign In&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;/div&gt;
    );
  }
}

function validate(values) {
  const errors = {};

  if (!values.email) {
    errors.email = 'Enter a username';
  }

  if (!values.password) {
    errors.password = 'Enter a password'
  }

  return errors;
}

function mapStateToProps(state) {
  return { errorMessage: state.auth.error }
}

SignIn = reduxForm({
  form: 'signin',
  validate: validate
})(SignIn);

export default connect(mapStateToProps, actions)(SignIn);
</code></pre>
