CODEWITHSUNDEEP
javascriptreactjs
Pawan Kumar Singh
Pawan Kumar Singh

Reputation: 121

Reactjs AutoComplete : 'off'

<div className={inputContainerClass}>
 <input
                    required
                    autoComplete='off'
                    value={value}
                    type='password'
                    maxLength=15
                />

</div>

autoComplete : 'off', autoComplete: {'off'}, autocomplete:{false}, <input type="password" style="display:none"> are not working.

Upvotes: 6

Views: 26125

Answers (6)

Muhammad Ovi
Muhammad Ovi

Reputation: 1086

<input name="my-field-name" autoComplete="new-password" />

Upvotes: 16

Ngo Trong Phuc
Ngo Trong Phuc

Reputation: 57

Add this attribute to your component:

autoComplete="off" role="presentation"

Upvotes: 1

Bernie Green
Bernie Green

Reputation: 157

It seems autoComplete="off" or autoComplete="new-password" works, but after the form is used multiple times it starts saving the values of the field to whatever string you set for the autoComplete.

I've tried numerous strings for the autoComplete, but it always ends up coming back. The best solution I have found for this is to generate a new string for the autoComplete every time. I have been doing that like so with no issues:

<input name="field-name" autoComplete={'' + Math.random()} />

Upvotes: 13

Vlad Pavlovski
Vlad Pavlovski

Reputation: 2000

You have to wrap input tag into form:

<form autocomplete="off">
  <input type="text" />
</form>

Upvotes: 5

Ann Prokhorova
Ann Prokhorova

Reputation: 68

It should be autocomplete="off". But keep in mind that chrome officially ignores this and will use autocomplete anyway. Take a look here for some workarounds

Upvotes: -1

loelsonk
loelsonk

Reputation: 3598

You need to use autoComplete="off". See working example.

const Element = () => (
  <div>
    <input
      name="email"
      autoComplete="off" />
  </div>
);

ReactDOM.render(
  <Element />,
  document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id="root"></div>

Upvotes: 1

Related Questions