React doesn't render autocomplete off

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