如何防止 Firefox 使用电子邮件自动填充用户名输入？

Question

I'm using React. I have a registration form component with Username , E-mail and Password fields on it. I've set autoComplete="off" for the entire form, but firefox still trying to autocomplete the form. I think this second autocomplete feature is somehow built in browser itself, so i don't think it will be possible to disable it completely from my code.

I've accepted this, but there is another issue. Firefox is trying to fill Username field on the form with E-mail. When i delete Username field autofill switches to E-mail field and works fine, but i dont want to delete Username field. Also, if i rename Username field (both 'name' and 'label' props) to something completely different from 'Username' it works too.

Question: how can i prevent Firefox from filling the wrong field?

Here's E-mail and Username components:

<FormRow>
    <InputText name="username" label="Username" rules={{ required: true }} />
</FormRow>
<FormRow>
    <InputText name="email" label="E-mail" rules={{ required: true }} />
</FormRow>

Props name goes to input element. Props label renders in label element.

Thank you!

Answer 1

You can try to turn autocomplete off. https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion