React no hace que el autocompletado esté desactivado

¿Cómo hago para reaccionar renderizarlo?

<input
    id={field.name}
    className="form-control"
    type="text"
    placeholder={field.name}
    autocomplete="off"
    {...field}/>

Capital "C" autoComplete. Esto se menciona en la documentación de React:

https://facebook.github.io/react/docs/tags-and-attributes.html

Deberías poner:

autoComplete="new-password"

Esto eliminará el autocompletado

De acuerdo con la documentación de Mozilla , debe establecer un valor no válido para realmente desactivar el autocompletado. En algunos navegadores, las sugerencias de autocompletar aún se ofrecen aunque el atributo esté desactivado.

Esto funcionó para mí (react-bootstrap):

<FormControl
  value={this.state.value}
  autoComplete="nope"
  {...props}
/>

Si ha leído la respuesta correcta y todavía tiene este problema (especialmente en Chrome), bienvenido al club ... así que compruebe cómo lo he logrado:

<form autoComplete="new-password" ... >
        <input name="myInput" type="text" autoComplete="off" id="myInput" placeholder="Search field" />
</form>

Notas

• El formulario no tiene que ser necesariamente el padre directo del elemento de entrada.
• la entrada necesita un atributo de nombre
• también funciona con la <FormControl/>etiqueta React-Bootstrap (en lugar de <input/>)

autoComplete = "none" - funciona para mí.

Ninguna de estas soluciones funcionó realmente en Chrome 80.

Después de horas de prueba y error, este truco muy extraño funcionó para mí:

1. Agregar autoComplete="none"a cada uno <input>: Google omite autocomplete = "off" ahora
2. Envuelva sus campos en un contenedor: <form>o<div>
3. Necesita al menos un campo de entrada válido con autoComplete="on". Este debería ser el último elemento del contenedor. Entonces agregué el siguiente campo de entrada al final de mi formulario:

<input 
  type="text" 
  autoComplete="on" 
  value="" 
  style={{display: 'none', opacity: 0, position: 'absolute', left: '-100000px'}} 
  readOnly={true}
/>

El infierno de autocompletado de Chrome se apaga agregando el atributo de nueva contraseña.

autoComplete="new-password"

En acción se ve así:

<input            
type="password"
autoComplete="new-password"
/>

más discusión sobre:

Discusión de Autocompletar de Chrome

Además de la respuesta de @ azium, <input>debe colocarse dentro de la <form>etiqueta, luego autoCompletefunciona

Lo resolví con solo una línea:

Si usa la forma recomendada con "changeHandler ()" y el estado de los componentes, simplemente inserte:

changeHandler = (e) => {    
  if (!e.isTrusted) return;
  ... your code
}

Más información sobre ese changeHandler () - Thing:
https://reactjs.org/docs/forms.html#controlled-components

También probé muchas opciones, pero lo que terminé haciendo fue reemplazar la <form>etiqueta con la <div>etiqueta y administrar manualmente cada entrada que tenía en ese formulario.

Aquí está el "Funciona en mi máquina"

Versión de Chrome 83.0.4103.116 y React. Parece que el truco que funcionó para mí es ponerlo dentro de un formulario y agregar el atributo autoComplete . Aviso Si prueba esto en una aplicación que no reacciona, tendrá que completar el autocompletado con una C minúscula

 <form autoComplete="off">
      <input type="text" autoComplete="new-password" />
 </form>

y

<form autoComplete="new-password">
  <input type="text" autoComplete="new-password" />
</form>