React doesn't render autocomplete off

Question

How do I make react render it?

Answer 1

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

https://facebook.github.io/react/docs/tags-and-attributes.html

Answer 2

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>

Answer 3

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/>)

Answer 4

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}
/>

Answer 5

You should put:

autoComplete="new-password"

This will remove the autocomplete

Answer 6

Chrome autocomplete hell turns off by adding new-password attribute.

autoComplete="new-password"

In action looks like this:

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

more discussion on:

Chrome AutoComplete Discussion