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.