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 stackoverflow.com/questions/15738259/disabling-chrome-autofill — Maielo
– Maielo, Commented Apr 1, 2020 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
– Tsabary, Commented Apr 1, 2020 at 11:17

Mohit Gahlot · Accepted Answer · 2020-04-01 12:36:50Z

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 1, 2020 at 12:36

Mohit Gahlot

662 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Emily Siu Over a year ago

Oh my god, thank you. Simply setting autoComplete="off" or autoComplete="new-password" in <input> was no longer working and I was losing my mind for a hot sec

iamhuynq · Accepted Answer · 2020-04-01 11:07:55Z

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 1, 2020 at 11:07

iamhuynq

5,5572 gold badges17 silver badges41 bronze badges

Comments

MehrabHosseini · Accepted Answer · 2021-12-14 09:15:17Z

0

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

this will remove the autocomplete

Collectives™ on Stack Overflow

Disable input auto complete on React.js

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related