Text input autocomplete forces 2 clicks

I have a very simple login form in React.

I don't think the React component code itself is the issue, but I'll add it here for clarity:

import React, { ChangeEvent, useState, useEffect } from "react"
import axios from "axios";
import { useNavigate } from 'react-router-dom';
import classnames from "classnames";

import "./Login.scss";

export default function Login() {
    const [user, setUser] = useState('');
    const [password, setPassword] = useState('');
    const [canSubmit, setCanSubmit] = useState(false);
    const navigate = useNavigate();
    useEffect(() => {
        setCanSubmit(!!user && !!password)
    }, [user, password])

    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
        const { name, value } = event.target;

        if (name === "username") {
            setUser(value);
        } else {
            setPassword(value);
        }
    };

    const onSubmit = async e => {
        e.preventDefault();

        if (!canSubmit) {
            return;
        }

        try {
            await axios.post("/api/admin/login", {
                username: user,
                password
            });
        } catch (error) {
            alert("lol " + error);
            return;
        }

        navigate("/admin");
    };

    return <form onSubmit={onSubmit} autoComplete="on">
        <div className="login flex-column flex-align-items-center flex-align-self-center">
            <div className="title">LOGIN</div>

            <div className="field">
                <label htmlFor="username">Username</label>
                <input type="text" placeholder="Enter your username" value={user} name="username" onChange={handleChange} />
            </div>
            <div className="field">
                <label htmlFor="password">Password</label>
                <input type="password" placeholder="Enter your password" value={password} name="password" onChange={handleChange} />
            </div>

            <button type="submit" className={classnames({ 'disabled': !canSubmit })}>Login</button>
        </div>
    </form>
}

The inputs are styles like this: (it's SASS)

input {
  background-color: transparent;
  outline: none;
  border: none;
  padding-bottom: 10px;
  padding-left: 1.5rem;
  font-size: 1.3rem;

  box-sizing: border-box;
  box-shadow: inset 0px -3px 0px 0px rgba(187, 187, 187, 0.2);
  transition: box-shadow 0.2s ease-in;

  &:focus {
    box-shadow: inset 0px -3px 0px 0px rgba(34, 193, 195, 0.7);
    outline: none;
  }

  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus {
    color: white !important;
    background-color: #12130f !important;
  }
}

Initially, the form looks fine:

If I just type normally into the inputs, it looks great:

When clicking the username field, I'm getting Chrome's "normal" autocomplete, instead of a suggestion to autofill the password:

Only after the username field is filled, when I click again, I get the actual suggestion to fill in the password, which when clicked also causes the password input to lose all its styling:

Chrome is not recognizing your "username" and "password" fields as credentials fields because you did not add the autocomplete attribute with the value "username" to the "username" input and "current-password" to the "password" input.

<input type="text" placeholder="Enter your username" value={user} name="username" onChange={handleChange} autoComplete="username" />

<input type="password" placeholder="Enter your password" value={password} name="password" onChange={handleChange} autoComplete="current-password" />

BTW you can fix Chrome's ignorance for your form field styles by using CSS selector to target the autofilled input fields and apply the desired styles.

input:-webkit-autofill {
  box-shadow: inset 0px -3px 0px 0px rgba(34, 193, 195, 0.7);
}