React doesn't render autocomplete off

Question

How do I make react render it?

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

Answer 1

Chrome it is adding internally and it is filling automatically whenever we have input tag with username and password.

To avoid autofill for username and password, we have to remove the development URL from this location

chrome --> 3 dots --> password and autofill --> Google password manager

Answer 2

My problem was with value attribute. When I remove it it works like a charm without autoComplete sttribute

Try to remove value:

value={code as string}

Answer 3

In my case my EMail and Password fields were autoCompleted by Browser, it was overwriting initial values for both these fields on render.Well, nothing worked for me for more then 3 days, i was fed up with trying all the options. Then, i read how BROWSER intercepts email and password. I found that browser whenever sees password field in form then it initializes them email and password field of form itself no matter what (iff any password is saved in it's cache). Here is the solution to it: just add the following line in input/custom component field of password:

autoComplete="new-password"

And it will work.

Answer 4

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

Answer 5

If it is not an password field please do:

autocomplete="new-off"

Answer 6

this worked for me, try:

autoComplete="off" role="presentation"

Answer 7

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.

Answer 8

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.

Answer 9

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

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

Answer 10

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>

Answer 11

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.

Answer 12

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]);}

Answer 13

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.

Answer 14

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.

Answer 15

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 16

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

Answer 17

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

Answer 18

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.

Answer 19

autoComplete="none" - works for me.

Answer 20

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 21

You should put:

autoComplete="new-password"

This will remove the autocomplete

Answer 22

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 23

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

Answer 24

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