在 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?

Answer 1

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

Answer 2

you can add a dummy invisible input above your password

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

Answer 3

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

this will remove the autocomplete

more on this here

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