Currently, I am in the process of creating a registration form for a website. I have implemented the handleChange function to alter the input text in the regData state. However, I am encountering an issue where every time I type something into an input field, the field loses focus after each keypress. For instance, if I intend to type "cool" in the input field, I need to click on the input field, press 'c', click again, press 'o', and repeat this process for each letter.
// Initialization of Errors and Navigate.
const [RegData, setRegData] = React.useState({
firstname: '',
lastname: '',
username: '',
email: '',
password: '',
});
function handleChange(event) {
const { name, value } = event.target;
setRegData((prevRegData) => {
return {
...prevRegData,
[name]: value,
};
});
}
return (
<Cont>
<Logo to="/">Aurum.</Logo>
<Container>
<RegContainer>
<Title>REGISTER</Title>
<Form>
<Input
type="text"
name="firstname"
value={RegData.firstname}
placeholder="First Name"
onChange={handleChange}
/>
<Input
type="text"
name="lastname"
value={RegData.lastname}
placeholder="Last Name"
onChange={handleChange}
/>
<Input
type="text"
name="username"
value={RegData.username}
placeholder="Username"
onChange={handleChange}
/>
<Input
type="email"
name="email"
value={RegData.email}
placeholder="Email"
onChange={handleChange}
/>
<Input
type="password"
name="password"
value={RegData.password}
placeholder="Password"
onChange={handleChange}
/>
<Input
type="text"
name="confPassword"
placeholder="Confirm Password"
onChange={handleChange}
/>
<SignUpBtn>SIGN UP</SignUpBtn>
</Form>
Here is the link to access the hosted version of the site along with the full source code
I have reviewed other forms that follow similar methods to mine, but I seem to be the only one facing this particular focus loss issue. Despite attempting to change functions and utilize callbacks, the problem persists with focus being lost after every keypress in the input fields.