Input form losing focus every time I type a character

Question

For some reason, my input form loses focus every time I input a character. I type in a character and the cursor would go away and I would have to click on the form again and input another character. My goal is to record the user input for the email address and password, which I have accomplished but the only problem is that I have input a character, click on the form, and input a character again. I would have to repeat this over and over again until I finished inputting my credentials. Can anyone please help me with this issue?

---

import React, { Component } from 'react';
import { Navbar, Nav, Form, Col, Row, Button } from 'react-bootstrap';
import styled from 'styled-components';

class NavBarClass extends Component {
    constructor() {
        super()

        this.state = {
            email: "",
            password: ""
        }
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(event) {
        event.preventDefault();
        console.log(this.state);
    }
    handleEmailChange(event)   {
        this.setState({
            email: event.target.value
        })
    }

    handlePassChange(event)   {
        this.setState({
            password: event.target.value
        })
    }

    render() {
        const Styles = styled.div`
        .navbar {
            background-color: #222;
            }
        .navbar-brand, .navbar-nav .nav-link, .form-label {
            color: #C0C0C0;
        &:hover {
            color: white;
        }
    }
        .form-inline > * {
            margin:5px 3px;
    }
    `
        return (
            <Styles>
                <Navbar expand="lg">
                    <Navbar.Brand href="/">ABC Group</Navbar.Brand>
                    <Navbar.Toggle aria-controls="basic-navbar-nav" />
                    <Navbar.Collapse id="basic-navbar-nav">
                        <Nav className="ml-auto">
                            <Form inline onSubmit={this.handleSubmit}>
                                <Form.Group as={Row} controlId="formHorizontalEmail">
                                    <Form.Label column sm={1000} name="email" >Email:&nbsp;</Form.Label>
                                    <Col sm={15}>
                                        <Form.Control onChange={this.handleEmailChange.bind(this)} value={this.state.email} size="sm" type="email" placeholder="Enter your email" />
                                    </Col>
                                </Form.Group>
                                <Form.Group as={Row} controlId="formHorizontalPassword">
                                    <Form.Label column sm={1000}>Password:&nbsp;</Form.Label>
                                    <Col sm={15}>
                                        <Form.Control onChange={this.handlePassChange.bind(this)} value={this.state.password} size="sm" type="text" placeholder="Enter your password" />
                                    </Col>
                                </Form.Group>
                                <Button variant="primary" type="submit">Submit</Button>
                            </Form>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
            </Styles>
        )
    }
}

export default NavBarClass;

Answer 1

Try to remove the Styles from the render method, try it outside the class Every time that you type you are re-rendering your component, so, declaring the Styles inside the render function makes you lose the current focus.

const Styles = styled.div`
        .navbar {
            background-color: #222;
            }
        .navbar-brand, .navbar-nav .nav-link, .form-label {
            color: #C0C0C0;
        &:hover {
            color: white;
        }
    }
        .form-inline > * {
            margin:5px 3px;
    }
    `
    class NavBarClass extends Component {


        render() {
            const Styles = styled.div`
            .navbar {
                background-color: #222;
                }
            .navbar-brand, .navbar-nav .nav-link, .form-label {
                color: #C0C0C0;
            &:hover {
                color: white;
            }
        }
            .form-inline > * {
                margin:5px 3px;
        }
        `
            return (
                <Styles>
                    <Navbar expand="lg">
                        <Navbar.Brand href="/">ABC Group</Navbar.Brand>
                        <Navbar.Toggle aria-controls="basic-navbar-nav" />
                        <Navbar.Collapse id="basic-navbar-nav">
                            <Nav className="ml-auto">
                                <Form inline onSubmit={this.handleSubmit}>
                                    <Form.Group as={Row} controlId="formHorizontalEmail">
                                        <Form.Label column sm={1000} name="email" >Email:&nbsp;</Form.Label>
                                        <Col sm={15}>
                                            <Form.Control onChange={this.handleEmailChange.bind(this)} value={this.state.email} size="sm" type="email" placeholder="Enter your email" />
                                        </Col>
                                    </Form.Group>
                                    <Form.Group as={Row} controlId="formHorizontalPassword">
                                        <Form.Label column sm={1000}>Password:&nbsp;</Form.Label>
                                        <Col sm={15}>
                                            <Form.Control onChange={this.handlePassChange.bind(this)} value={this.state.password} size="sm" type="text" placeholder="Enter your password" />
                                        </Col>
                                    </Form.Group>
                                    <Button variant="primary" type="submit">Submit</Button>
                                </Form>
                            </Nav>
                        </Navbar.Collapse>
                    </Navbar>
                </Styles>
            )
        }
    }

    export default NavBarClass;

Answer 2

This is kind of suspicious:

render() {
    const Styles = styled.div`
    ...
    `

    return (
        <Styles>
            ...
        </Styles>
    )
}

styled creates proper components, so defining a new styled component on every render cycle, then using it as your top-level component is probably gonna have some unusual effects. In this case, I suspect all of Styles child components are re-mounting on each render, which would cause a loss of focus of your fields.

Try pulling the definition for Styles outside of the render function (and preferably outside of the component entirely):

const Styles = styled.div`
    ...
`

class NavBarClass extends Component {
    ...
}