'react-redux-form'- element loosing focus after everytime I type a character

[AnkitBagaria24]

I have created a form using Form and Control Component from 'react-redux-form'. I am also using createForms inside my combinereducer function inorder to maintain the form state in redux store. But I am loosing focus after everytime a character is typed.

Please help urgently.

Pasting the code below for reference.

import React, {Component} from 'react';
import {Form, Errors, Control,actions} from 'react-redux-form';

.... different validator functions

class Login extends Component {
    constructor(props) {
        super(props);
    }

    handleSubmit = (values) => {
        console.log (JSON.stringify(values));
        alert (JSON.stringify(values));
        this.props.resetLoginForm();
    }

    render() {
        return(
            <div className="jumbotron">
                    <div className="row">
                        <div className="col-12 d-flex justify-content-center">
                            <span className="h1"><strong className="text-uppercase">LOGIN</strong></span>
                        </div>
                    </div>

                            <Form model="login" className="col-md-6" onSubmit={((values) => this.handleSubmit(values))}>
                                <div className="form-group row">
                                    <label htmlFor="email" className="col-md-2 text-right">Email</label>
                                    <div className="col-md-10">
                                    <Control.text model=".email" className="form-control" id="email" name="email" placeholder="Email" validators={{required,validEmail}}/>
                                    <Errors className="text-danger" model=".email" show="touched" messages = {{
                                        required : "Email is mandatory to Login ",
                                        validEmail : "Invalid Email Format "
                                    }} />
                                    </div>
                                </div>
                                <div className="form-group row">
                                    <label htmlFor="password" className="col-md-2 text-right">Password</label>
                                    <div className="col-md-10">
                                    <Control type="password" model=".password" className="form-control" id="password" name="password" placeholder="Password" validators={{required, minLength:minLength(6),maxLength:maxLength(15)}}/>
                                    <Errors className = "text-danger" model=".password" show="touched" messages ={{
                                        required : "Password Mandatory ",
                                        minLength : "Minimum Length must be greater than 6 characters ",
                                        maxLength : "Maximum Lenth must be 15 characters or less "
                                    }}/>
                                    <div className = "mt-3"><button type="submit" className="btn btn-primary" >Login</button></div>
                                    </div>
                                </div>   
                            </Form>
                        </div>
        );
    }
}
export default Login; 

-- Combine Reducer function --

...various imports..
export const configureStore = () => {
    const store = createStore (
        combineReducers({
            //login : login,
            registerUser : registerUser,
            addBusiness : addBusiness,
            ...createForms({
                login : InitialLogin
            })
        }),
        applyMiddleware(thunk,logger)
    );
    return store;
}

[AnkitBagaria24]

Resolved. hence closing the issue.

[2brownc]

Resolved. hence closing the issue.

How did you solve it?