Disable input auto complete on React.js

Question

I know this has been asked a 1000 times, but all the answers say the same yet neither work for me at all.

Here'm my input field:

  <input
    className={
      required ? "input-field__input input-field__input--required" : "input-field__input"
    }
    id={placeHolder}
    type={type}
    placeholder={placeHolder}
    autoComplete="new-password"
    value={value || ""}
    onChange={e => handleChange(e.target.value)}
  />

I've tried autoComplete="new-password", autocomplete="new-password", autoComplete="none" & autocomplete="none" but chrome keeps showing me sugestions based on past inputs, no matter which one I've tried. Is there something else happening that might affect it?

possible duplicate of https://stackoverflow.com/questions/15738259/disabling-chrome-autofill — Maielo, Apr 01 '20 at 11:05
Nothing works. Tried to generate a unique input for that autocomplete fields as well by providing it the current timestamp in milliseconds, but still got auto complete. — Tsabary, Apr 01 '20 at 11:17

score 5 · Accepted Answer · answered Apr 01 '20 at 12:36

5

Add autoComplete="off" in the form tag instead of the input tag. Below is the code to follow :-

  <form autoComplete="off">
          <input id="input" type="text" placeholder="Enter Text" />
  </form>

{autoComplete} syntax i.e camelCase for React, html follow {autocomplete} in lowercase. JSX also convert it to lower case. You can see the rendered DOM.

Here is the demo :- https://codepen.io/gahlotbaba/pen/JjdzmmB?editors=0111

Hope it helps.

answered Apr 01 '20 at 12:36

Mohit Gahlot

66
2

Oh my god, thank you. Simply setting autoComplete="off" or autoComplete="new-password" in was no longer working and I was losing my mind for a hot sec – Emily Siu Apr 15 '20 at 20:37

score 0 · Answer 2 · answered Apr 01 '20 at 11:07

0

you can add a dummy invisible input above your password

    <div style={{ height: 0px; overflow: hidden; background: transparent; }}>
        <input type="password"></input>
    </div>

answered Apr 01 '20 at 11:07

iamhuynq

5,357
1
13
36

score 0 · Answer 3 · answered Dec 14 '21 at 09:15

0

autoComplete="new-password" should work for you.

this will remove the autocomplete

Disable input auto complete on React.js

3 Answers3