React doesn't render autocomplete off

How do I make react render it?

<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://reactjs.org/docs/dom-elements.html#all-supported-html-attributes

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.

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>

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 or newpassword (neither worked), using onFocus, making sure I use autoComplete in React and not autocomplete, but none of them helped.

In the end mscott2005's 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" for the desired field:

  <input autoComplete="off" />
  

• autocomplete="on" for the fake hidden field:

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

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

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

Your browser will not respect autocomplete='off' if you have saved passwords for the page. Set autocomplete='off' in your project, refresh your project, then remove any saved passwords from your browser.

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

First check if value is coming from auto complete feature

function isValueComingFromAutoComplete(_value, field) {
  return _value.length > 1 && inputs[field].value === "";
}

And then add the condition

function handleInputChange(_value, field) {
  if (!isValueComingFromAutoComplete(_value, field)) {
     // change state
  }
}

Note that it won't work if the input value has length 1.

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.

I am having trouble with the auto complete on redux forms, a workaroud I did using redux forms; working 2021/03/08

if(userId!=undefined)
    {
      instance.get('/user/'+userId)
        .then(function(response){
          dispatch(initialize('user_create_update_form',{
            name:response.data.name,
            email:response.data.email,
            password:response.data.password,
            user_scope:response.data.user_scope.map((item,index)=>{
              return {
                value: item.name,
                label:item.name
              }
            })
          }));
      });
    }
    else
    {
      dispatch(initialize('user_create_update_form',{
        name:"",
        email:"Mail",
        password:"New Password",
        user_scope:[]
      }));
    }

Goal being: dispatching a form with dummy values.

you can use useEffect

function ScheduleComponent(props){
const [schedulecontent, setSchedulecontent] =seState({email:'',phone:'',date:'',time:''});

   function handlechange(event) {
      const { name, value } = event.target;
       setSchedulecontent((prevContent) => {
        return {
          ...prevContent,
          [name]: value
        };
      })
    }


    useEffect(() => {
//do something here...
    }, [schedulecontent.email,schedulecontent.phone,schedulecontent.date,schedulecontent.time]);}

Although this is an older question, I couldn't find a simple approach and future compatible answer.

A very simple approach to solve the auto complete problem is to use the input field without making it unique in some way for the browser (if you can of course). For example if you don't add the id nor the name it is working out of the box.

The way to take the field name is to add the fieldName value within the onChange function:

<input
  type="search"
  className="form-control"
  placeholder="Quick Search"
  onChange={(event) =>
    columnSearch({
      columnName: column.name,
      searchValue: event.target.value,
    })
  }
/>

Also keep in mind that the input is not within a form HTML tag.

If it is not an password field please do:

autocomplete="new-off"

remove autofill details from your browser after doing autoComplete off in your input field then it works properly

If you are tired of trying different hacks...

Just add > autocomplete="new-password"

In your password input field

Check this:-

            <form action="" className='w-1/2 border border-indigo-500 mb-10'>
                <label htmlFor="username">User Name</label>
                <input type="text" name="username" id="username"/>
                <label htmlFor="password">Password</label>
                <input type="password" name="password" id="password" 
                autocomplete="new-password"/>
                <label htmlFor="phone">Phone</label>
                <input type="text" name="phone" id="phone"/>
                <label htmlFor="email">Email</label>
                <input type="text" name="email" id="email"/>
            </form>

this worked for me, try:

autoComplete="off" role="presentation"