TextFieldRoot can't be set as `email` type when there's a `password` type input in a form

[WaningJupiter]

I'm using TextFieldRoot to create a login form with React hook form. I'm using the TextFieldRoot inside the Tabs theme component.

I realized that in browsers (Firefox and Safari), the <TextField.Root> is always treated as a field of password, however, I specified its type and its name.

The react hook form register works correctly. I tested the code separately, it turns out that if the form only contains a <TextField.Root type="email">, it behaves as expected. However, when both <TextField.Root type="email"> and <TextField.Root type="password"> are present in the same form, the first email input field is also mistakenly treated as a password input by the browser.

Here's my code:

<Tabs.Root defaultValue="login">
	<Tabs.List>
		...triggers
	</Tabs.List>

..
<Tabs.Content value="login">
<form onSubmit={handleLoginSubmit((data) => console.log(data))} action="#" method="post">
          <fieldset className="grid gap-8 max-w-md" name="login">
         <TextInput
            id="email"
            label="Email"
            placeholder="your mail"
            type="email"
            register={{
             ...register("email", {
            required: "Please enter your mail",
            }), }}
            errorMessage={errors.email?.message}
       /> // The textinput doesn't work as email, see more in the component below 
         //Without the PasswordInput, the first input will be treated as email correctly 
       <PasswordInput
                      id="password"
                      label="Mot de passe"
                      placeholder="Votre mot de passe"
                      name="password"
                    />
       </fieldset >
</form>
</Tabs.Content>
                      ...

type TextInputProps = {
  id: string;
  label: string;
  placeholder: string;
  type: "email"|"text";
  register?: UseFormRegisterReturn;
  errorMessage?:string;
};

export function TextInput({ id, label, placeholder, type = "email", register, errorMessage }: TextInputProps) {
  return (
    <Box className="flex-1">
      <label htmlFor={id} className="text-sm font-medium text-gray-700">
        {label}
      </label>
      <TextField.Root {...register} id={id} placeholder={placeholder} size="3" type={type}/>
      {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
    </Box>
  );
}

[WaningJupiter]

I think it's more a behavior of browser rather than <TextField.Root>, I tested with native without component, the same problem.

[ijxy]

What do you mean by "mistakenly treated as a password input by the browser"?

As far as I can tell, the browser is correctly rendering the HTML with the expected properties. For example:

<Section>
  <form
    action={(formData) => {
      const data = Object.fromEntries(formData.entries());
      console.log(data);
    }}
  >
    <TextField.Root name="email" type="email" />
    <TextField.Root name="password" type="password" />
    <Button type="submit">Submit</Button>
  </form>
</Section>

<div class="rt-TextFieldRoot rt-r-size-2 rt-variant-surface">
  <input spellcheck="false" class="rt-reset rt-TextFieldInput" type="email" name="email">
</div>
<div class="rt-TextFieldRoot rt-r-size-2 rt-variant-surface">
  <input spellcheck="false" class="rt-reset rt-TextFieldInput" type="password" name="password">
</div>
<button data-accent-color="" type="submit" class="rt-reset rt-BaseButton rt-r-size-2 rt-variant-solid rt-Button">Submit</button>

Chrome:

Safari:

[WaningJupiter]

Hello, @ijxy sorry, i didn't make it very clear. When I keeped click at the field of email (not the first time of click), the browser gave me a :"Manage your passwords" block.It will take me to the window where we find all the passwords remebered by the browsers. But I set it very clearly it's a email field