email field in JSX causing error on touch

Question

There is this bug that doesn't affect the functionality but its just there and it does bother me.

So, I have this signup form in my react.js app. Here is a basic version of it:

import { useState } from "react"
import {signupApi} from '../utils/api'


const SignUpPage = () => {
    const [credentials, setCredentials] = useState({ username: '', password: '', email:'', });
    const [error, setError] = useState(null);

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            signupApi(credentials);
        } catch (error) {
            setError(error.message);
        }
    };

    const handleChange = (e) => {
        console.log("heyhey")
        setCredentials({
            ...credentials,
            [e.target.name]: e.target.value,
        });
    };

    return(
        <div>
            <h1>Signup</h1>
            {error && <p>{error}</p>}
            <form onSubmit={handleSubmit}>
                <div>
                    <label htmlFor="username">Username:</label>
                    <input autoComplete="off" type="text" id="username" name="username" value={credentials.username} onChange={handleChange} required />
                </div>
                <div>
                    <label htmlFor="password">Password:</label>
                    <input autoComplete="off"  type="password" id="password" name="password" value={credentials.password} onChange={handleChange}  required />
                </div>
                <div>
                    <label htmlFor="email">Email:</label>
                    <input autoComplete="off" type="email" id="email" placeholder="example@gmail.com" name="email" value={credentials.email} onChange={handleChange} required/>
                </div>
                <button type="submit">Signup</button>
            </form>
        </div>
    )
}

export default SignUpPage

When I click on "email" field, it creates the following error:

And this is what I see when I open chunk.infield.js

• I have no libraries installed directly related to form nor icons.

    "dependencies": {
    "@reduxjs/toolkit": "^1.9.2",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "framer-motion": "^9.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.8.0",
    "react-scripts": "5.0.1",
    "universal-cookie": "^4.0.4",
    "web-vitals": "^2.1.4"
  },
  

• If I set a default value to email variable such as 'example@gmail.com', it stops throwing error.

• If I set a default value to email variable such as just '@' or when I leave it just empty, it keeps throwing same error.

• With or without error, signup function works just fine, it sends data through api, saves data into database.

• When user fills the email field, like "myemailaddress@gmail.com", and then reclick on email field, no error occurs.

I already use a placeholder, I don't want any default value for email variable, it should be empty.

It looks to me like there is a validation going on at the background somewhere, but the way it works is not optimal, doesn't help really.

What could be causing this, and how can I solve it?

Answer 1

There is nothing wrong with your code. This is caused by LastPass chrome plugin. Disable it (just for test) and the error will be gone.