React doesn't render autocomplete off

html reactjs google-chrome

137,786

Solution 1

Capital "C" autoComplete. This is mentioned in the React documentation:

https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes

Solution 2

You should put:

autoComplete="new-password"

This will remove the autocomplete

Solution 3

According to Mozilla documentation, you have to set an invalid value to really turn the autocompletion off. In some browsers, autocomplete suggestions are still given even though the attribute is set to off.

This worked for me (react-bootstrap):

<FormControl
  value={this.state.value}
  autoComplete="nope"
  {...props}
/>

Solution 4

If you've read the correct answer and still have this issue (especially in Chrome), welcome to the club... so check how I've accomplished it:

<form autoComplete="new-password" ... >
        <input name="myInput" type="text" autoComplete="off" id="myInput" placeholder="Search field" />
</form>

Notes

form does not necessarily need to be the direct parent of the input element
input needs a name attribute
it also works with React-Bootstrap <FormControl/> tag (instead of <input/>)

Solution 5

Here's the "It works on my machine"

Chrome Version 83.0.4103.116 and React. Looks like the trick that worked for me is to put it inside of a form and add the autoComplete attribute. Notice If you try this on a non-react app, you will have to do autocomplete with a lowercase C

 <form autoComplete="off">
      <input type="text" autoComplete="new-password" />
 </form>

and

<form autoComplete="new-password">
  <input type="text" autoComplete="new-password" />
</form>

View more solutions

137,786

Yaroslav

JavaScript/Scala developer.

Updated on May 02, 2022

Comments

Yaroslav almost 2 years

How do I make react render it?

<input
    id={field.name}
    className="form-control"
    type="text"
    placeholder={field.name}
    autocomplete="off"
    {...field}/>

Yaroslav almost 8 years

Always throw an exception, not just silently ignore errors.
azium almost 8 years

@Yaroslav It's possible React throws a warning for this, if not this will github.com/yannickcr/eslint-plugin-react/blob/master/docs/ru‌les/…
azium almost 8 years

But also, it's not error because props can be anything.. how does React know when you're making your own prop or using an html attribute?
Yaroslav almost 8 years

Props can't be anything for html tags.
azium almost 8 years

I understand why you would think that's the case, but remember these JSX tags get transpiled down to function calls with a string that represents the tag type.
Yaroslav almost 8 years

Nothing prevents inside that function call validate props if tag type is html tag. That's just extra work which nobody wants to do.
azium almost 8 years

That's fair I guess. I would create an issue on react's github about it if I were you.
Yaroslav almost 8 years

Few people are such zealots of code safety as I am.
w3jimmy over 6 years

None of these work for me... any other suggestions? Also tried with Bootstrap FormControl and same...
IvanY over 6 years

when google chrome autofills my input, e.isTrusted is true :D
Admin almost 6 years

It doesn't work. I'm trying with Chrome 67. Nothing. I still need a fake input with display: none! Very crazy!
yesarpit almost 6 years

You saved me hours of frustation. Thanks :D
w3jimmy almost 6 years

thanks for feedback, but does your case tick all the 3 bullet notes?
Ajay G. almost 6 years

I really don't get why this works instead of "off". Weird.
Pim over 5 years

In some cases I was still getting autosuggestions with this. See my answer for a more complete solution.
Pim over 5 years

@w3jimmy See my answer below
Pim over 5 years

@AjayGupta developer.mozilla.org/en-US/docs/Web/Security/…
Ajay G. over 5 years

@Pim Makes sense. Thanks!
Wylliam Judd about 5 years

Wow, that's weird, but it's the only thing that's worked for me so far.
Jennifer Goncalves about 5 years

Welcome Alex. Try to be more verbose with your answer. Ponting out that your solution works because of the casing of "autoComplete" is important.
alexventuraio almost 5 years

@Pim Mmm is it the same autocomplete and autofill? Because it does not work for me using Chrome. It keeps autofilling the form with previous values sent with the same form.
Erik Kubica over 4 years

You are a legend, thanks! Also it makes sense, I wanted my new-password field to not be autocompleted :D
kenny about 4 years

Probably chrome is recognising the new within the name. I named it now autoComplete="new-off" which makes a little bit more sense to me if it's not a password field and it works fine :D
Blake Lockley about 4 years

This only worked for me once making sure the input was a direct child of a form element
Dimitri Kopriwa almost 4 years

This does not work for me: snack.expo.io/@kopax/67b5bb
Danys Chalifour about 3 years

Something else also succeeded, remove the password field, replace it with a send password reset button. Removing the field makes the browser not auto complete your form. When you create the user you send a password reset token from your database to the user email.
Vincent Decaux about 3 years

Thanks ! I was looking for this
Zsolt Meszaros over 2 years

I've downvoted your answer as it's the same as the answer with the second most upvotes (or other ones) but has an error that the accepted answer explains.
Admin almost 2 years

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
qu1j0t3 almost 2 years

This hack does not work for me (Chrome version 102.0.5005.61)