Reactjs AutoComplete : 'off'

Question

<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.

atleast show your code where you are using it? – Vikram Saini Jul 06 '17 at 10:15 — Vikram Saini, Jul 06 '17 at 10:15
{refCb(input)}} /> – Pawan Kumar Singh Jul 06 '17 at 10:18 — Pawan Kumar Singh, Jul 06 '17 at 10:18

Muhammad Ovi · Answer 1 · 2020-12-24T13:04:01.870

7

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

Worked for me

edited Dec 24 '20 at 13:04

answered Jan 18 '19 at 00:31

Muhammad Ovi

852
11
24

score 5 · Answer 2 · edited Sep 05 '20 at 20:50

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

score 1 · Answer 3 · answered Dec 19 '18 at 14:04

1

You have to wrap input tag into form:

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

answered Dec 19 '18 at 14:04

Vlad Pavlovski

31
3

score 0 · Answer 4 · answered Jul 06 '17 at 10:20

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>

score -1 · Answer 5 · answered Jul 06 '17 at 12:23

-1

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

answered Jul 06 '17 at 12:23

Ann Prokhorova

58
1

autoComplete is the React version of it, will be transformed to autocomplete on render. – mimic Jul 07 '20 at 00:05

Reactjs AutoComplete : 'off'

5 Answers5