Why are browsers autofilling my email field with password?

ghz 7months ago ⋅ 71 views

So I have a multi step register form, in the first step I want the user to give me email, password and confirm password. Pretty standard stuff. So as the first step I render:

type UserData = {
  email: string;
  password: string;
  confirmPassword: string;
};

type UserFormProps = UserData & {
  updateFields: (fields: Partial<UserData>) => void;
};

const UserForm = ({
  email,
  password,
  confirmPassword,
  updateFields,
}: UserFormProps) => {
  return (
    <>
      <label htmlFor="email">Email</label>
      <input
        autoFocus
        required
        type="email"
        value={email}
        onChange={(e) => updateFields({ email: e.target.value })}
        id="email"
        name="email"
      />
      <label htmlFor="password">Password</label>
      <input
        required
        type="password"
        value={password}
        onChange={(e) => updateFields({ password: e.target.value })}
        name="password"
        id="password"
      />
      <label htmlFor="confirm-password">Confirm Password</label>
      <input
        required
        type="password"
        value={confirmPassword}
        onChange={(e) => updateFields({ confirmPassword: e.target.value })}
        name="confirm-password"
        id="confirm-password"
      />
    </>
  );
};

export default UserForm;

Why are browsers auto-filling my email and confirm-password fields with a password suggestion? I explicitly gave type password to the second and third input fields. What is even weirder - confirm-password input field is displaying typed characters normally (not like type password would suggest - stars or dots). Any ideas what could be causing this issue? Parent component is not really important, it handles step changes, wraps steps in one form component etc.

Answers

Browsers sometimes ignore the type="password" attribute when auto-filling form fields based on their name or other attributes. This behavior can vary depending on the browser and its settings.

To prevent browsers from auto-filling the confirm-password field with a password suggestion, you can try adding the autocomplete="new-password" attribute to the input field. This attribute is specifically designed to prevent browsers from suggesting previously used passwords.

Here's how you can modify your confirm-password input field to include the autocomplete="new-password" attribute:

<input
  required
  type="password"
  value={confirmPassword}
  onChange={(e) => updateFields({ confirmPassword: e.target.value })}
  name="confirm-password"
  id="confirm-password"
  autoComplete="new-password" // Add this attribute
/>

Adding this attribute should prevent browsers from suggesting passwords in the confirm-password field. Additionally, you can also try adding autocomplete="off" to the form element itself to disable auto-fill for all form fields, though this may not always work reliably across all browsers.

#forms