React не вимикає автозаповнення

Як змусити реагувати?

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

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

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

You should put:

autoComplete="new-password"

This will remove the autocomplete

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

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

None of these solutions really worked on Chrome 80.

After hours of trial and error, this very strange hack worked for me:

1. Add autoComplete="none" to each <input> - Google skips autocomplete="off" now
2. Wrap your fields in a container : <form> or <div>
3. You need at least one valid input field with autoComplete="on". This should be the last element in the container. So I added the following input field to the bottom of my form:

<input 
  type="text" 
  autoComplete="on" 
  value="" 
  style={{display: 'none', opacity: 0, position: 'absolute', left: '-100000px'}} 
  readOnly={true}
/>

autoComplete="none" - works for me.

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

In addition to @azium's answer, <input> should be put inside the <form> tag, then autoComplete works

I solved it with just one line:

If you use the recommended way with "changeHandler()" and the components state, just insert:

changeHandler = (e) => {    
  if (!e.isTrusted) return;
  ... your code
}

More infos on that changeHandler()-Thing:
https://reactjs.org/docs/forms.html#controlled-components

I've also tried many options, but what I ended up doing was to replace the <form> tag with <div> tag and manually manage each input that I had in that form.

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>

Yeah, most of the suggestion here and elsewhere failed in Dec 2020.
I think I tried them all, the form wrapper, setting autocomplete either to "off" of "newpassword" (neither worked), usaing onFocus, making sure I use autoComplete and not autocomplete (not capitalization) but none of them helped.

In the end mscott2005 approach worked (+1) for me but I also tweaked it for a more minimal example which I am posting as an answer for others:

No form was needed, just the two input tags:

• autocomplete = "off" on the desired field

  <input ... autoComplete="off" />

• autocomplete = "on" on the fake hidden field

  <input

  id="fake-hidden-input-to-stop-google-address-lookup"
  autoComplete="on"
  style={{ display: 'none'}}>
  

The id is the best I have for documenting what is really a hack without using a comment.