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", autoplete="new-password", autoComplete="none" & autoplete="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?

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", autoplete="new-password", autoComplete="none" & autoplete="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?

• javascript
• reactjs
• forms

• 1 possible duplicate of stackoverflow./questions/15738259/disabling-chrome-autofill – Maielo Commented Apr 1, 2020 at 11:05
• Nothing works. Tried to generate a unique input for that autoplete fields as well by providing it the current timestamp in milliseconds, but still got auto plete. – Tsabary Commented Apr 1, 2020 at 11:17

3 Answers 3

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 {autoplete} 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.

you can add a dummy invisible input above your password

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

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

this will remove the autoplete

more on this here

https://github./react-toolbox/react-toolbox/issues/1795