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

16

<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

1,053
14
26

score 12 · 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 5 · Answer 3 · answered Dec 19 '18 at 14:04

5

You have to wrap input tag into form:

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

answered Dec 19 '18 at 14:04

Vlad Pavlovski

1,582
1
14
10

score 1 · 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 · edited Apr 12 '22 at 14:17

1

Add this attribute to your component:

autoComplete="off" role="presentation"

edited Apr 12 '22 at 14:17

Skatox

4,237
12
42
47

answered Apr 12 '22 at 11:27

Ngô Trọng Phúc

57
6

score -1 · Answer 6 · 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

68
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'

6 Answers6

Linked