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

Mattland

Answer 1

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

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

Selfdetermination

Always throw an exception, not just silently ignore errors. – Mattland

@Mattland It's possible React throws a warning for this, if not this will github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/… – Selfdetermination

But also, it's not error because props can be anything.. how does React know when you're making your own prop or using an html attribute? – Selfdetermination

Props can't be anything for html tags. – Mattland

I understand why you would think that's the case, but remember these JSX tags get transpiled down to function calls with a string that represents the tag type. – Selfdetermination

Nothing prevents inside that function call validate props if tag type is html tag. That's just extra work which nobody wants to do. – Mattland

That's fair I guess. I would create an issue on react's github about it if I were you. – Selfdetermination

Few people are such zealots of code safety as I am. – Mattland

None of these work for me... any other suggestions? Also tried with Bootstrap FormControl and same... – Fencer

@Fencer See my answer below – Elodea

This does not work for me: snack.expo.io/@kopax/67b5bb – Savanna

Answer 2

You should put:

autoComplete="new-password"

This will remove the autocomplete

Prison

I really don't get why this works instead of "off". Weird. – Dual

@AjayGupta developer.mozilla.org/en-US/docs/Web/Security/… – Elodea

@Elodea Makes sense. Thanks! – Dual

You are a legend, thanks! Also it makes sense, I wanted my new-password field to not be autocompleted :D – Ineslta

Probably chrome is recognising the new within the name. I named it now autoComplete="new-off" which makes a little bit more sense to me if it's not a password field and it works fine :D – Plowman

This only worked for me once making sure the input was a direct child of a form element – Costin

It does not work if you have saved passwords for that domain. – Samora

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

Elodea

Wow, that's weird, but it's the only thing that's worked for me so far. – Jeanette

@Elodea Mmm is it the same autocomplete and autofill? Because it does not work for me using Chrome. It keeps autofilling the form with previous values sent with the same form. – Allahabad

Only solution that works for me so far (chrome) – Unclean

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

Fencer

It doesn't work. I'm trying with Chrome 67. Nothing. I still need a fake input with display: none! Very crazy! – Chryselephantine

thanks for feedback, but does your case tick all the 3 bullet notes? – Fencer

In some cases I was still getting autosuggestions with this. See my answer for a more complete solution. – Elodea

Answer 5

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>

Hb

Answer 6

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

Inappropriate

This hack does not work for me (Chrome version 102.0.5005.61) – Noto

` readOnly={true}` works! – Fineness

Answer 7

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.

Wieche

Answer 8

autoComplete="none" - works for me.

Superfamily

Welcome Alex. Try to be more verbose with your answer. Ponting out that your solution works because of the casing of "autoComplete" is important. – Ambry

Answer 9

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

Rose

Answer 10

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.

Jaban

Answer 11

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.

Patriapatriarch

Answer 12

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

Wheelman

Thanks ! I was looking for this – Inoculum

Answer 13

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.

Bellow

Answer 14

If it is not an password field please do:

autocomplete="new-off"

Wimer

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Oppen

Answer 15

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

Argo

when google chrome autofills my input, e.isTrusted is true :D – Orran

Answer 16

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.

Biomedicine

Answer 17

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.

Turmoil

Something else also succeeded, remove the password field, replace it with a send password reset button. Removing the field makes the browser not auto complete your form. When you create the user you send a password reset token from your database to the user email. – Turmoil

Answer 18

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

Jaffa

Answer 19

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.

Laburnum

Answer 20

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>

Olga

I've downvoted your answer as it's the same as the answer with the second most upvotes (or other ones) but has an error that the accepted answer explains. – Raincoat

It does not work. – Samora

Answer 21

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

Appanage

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Oppen

Answer 22

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}

Kronick

Answer 23

this worked for me, try:

autoComplete="off" role="presentation"

Pegram

Its works only for address field as such, it did fail for other fields like name, phone number email etc.... Thanks for this code Ngo Trong Phuc – Fineness