React: Autocompletar de Chrome sobrescribe los valores de los componentes controlados
¿Quieres solicitar una función o informar de un error ?
Reportar un error. Inicialmente informado en https://github.com/mozilla-services/react-jsonschema-form/issues/1153
¿Cuál es el comportamiento actual?
Autocompletar sobrescribe los valores existentes en los campos cuando esos campos son componentes controlados en React.
Consulte https://jsfiddle.net/epicfaace/9p17e2qx/21/ - para probar esto, agregue una "Dirección guardada" en las opciones de Chrome.
¿Cuál es el comportamiento esperado?
Autocompletar no sobrescribe los campos existentes. Hice un JSFiddle con un formulario HTML simple, que funciona con el comportamiento esperado.
Ver https://jsfiddle.net/epicfaace/1my3f9n4/6/
¿Qué versiones de React y qué navegador / sistema operativo se ven afectados por este problema?
Reaccionar 15.3.2
Cromo 71.0.3578.98
epicfaace
Todos 4 comentarios
Parece ser causado si el prop "valor" (p. Ej. que Chrome parece ver como un valor / marcador de posición predeterminado para el campo) es igual al valor insertado del campo. Entonces, cuando reaccionó actualizó la propuesta de valor en el cambio de estado, técnicamente estamos cambiando el valor / marcador de posición predeterminado para que coincida con lo que escribimos. Entonces, Chrome lo ve como un campo intacto y se sobrescribirá en el llenado automático
Por ejemplo. Escriba una cadena en el campo de nombre ... react actualizará el valor prop a lo que haya escrito. Pruebe el correo electrónico Autocompletar y sobrescribirá el campo de nombre.
Sin embargo, escriba una cadena en el campo de nombre, luego inspeccione el elemento y edite la propiedad de valor de primer nombre a una cadena que no sea la que ha escrito, e intente completar automáticamente el correo electrónico nuevamente ... esta vez no se sobrescribirá ... . dado que el valor no es el mismo que el valor "predeterminado".
Otra forma de evitarlo es onChange, update autocomplete = this.state.value. Y Chrome reconocerá que no debe completar automáticamente este campo por alguna razón. (autocomplete = off no funciona ... tiene que ser una cadena aleatoria) Si está vacío y this.state.value está vacío, el autocompletado seguirá funcionando en el campo como se esperaba.
mabeabe28
en 24 ene. 2019
^^ Eso es correcto. Aquí hay un ejemplo de trabajo usando la sugerencia onChange: https://jsfiddle.net/epicfaace/9p17e2qx/29/
epicfaace
en 25 ene. 2019
¡Muy interesante! Este es un efecto secundario de sincronizar el atributo / propiedad de valor en las entradas que no conocía antes (gracias, @ mabeabe28):
Si el atributo de valor es el mismo que la propiedad de valor, Chrome asume que la entrada está "intacta" y reemplazará la propiedad de valor durante una acción de autocompletar
Me pregunto si esto es cierto en otros navegadores.
Siento que debemos tener un seguimiento de errores de los problemas de autocompletar, pero no estoy seguro de si alguno de ellos documenta esto. También hice una esencia que compara el enfoque nativo y React:
nhunzaker
en 28 ene. 2019
Si el atributo de valor es el mismo que la propiedad de valor, Chrome asume que la entrada está "intacta" y reemplazará la propiedad de valor durante una acción de autocompletar
Esto podría resolverse al menos parcialmente con # 13525 ("Dejar de reflejar los valores de entrada en el atributo de valor").
beheh
en 4 feb. 2019
Temas relacionados
zpao
·
3Comentarios
huxiaoqi567
·
3Comentarios
tleunen
·
3Comentarios
jimfb
·
3Comentarios
hnordt
·
3Comentarios
Comentario más útil
Parece ser causado si el prop "valor" (p. Ej. que Chrome parece ver como un valor / marcador de posición predeterminado para el campo) es igual al valor insertado del campo. Entonces, cuando reaccionó actualizó la propuesta de valor en el cambio de estado, técnicamente estamos cambiando el valor / marcador de posición predeterminado para que coincida con lo que escribimos. Entonces, Chrome lo ve como un campo intacto y se sobrescribirá en el llenado automático
Por ejemplo. Escriba una cadena en el campo de nombre ... react actualizará el valor prop a lo que haya escrito. Pruebe el correo electrónico Autocompletar y sobrescribirá el campo de nombre.
Sin embargo, escriba una cadena en el campo de nombre, luego inspeccione el elemento y edite la propiedad de valor de primer nombre a una cadena que no sea la que ha escrito, e intente completar automáticamente el correo electrónico nuevamente ... esta vez no se sobrescribirá ... . dado que el valor no es el mismo que el valor "predeterminado".
Otra forma de evitarlo es onChange, update autocomplete = this.state.value. Y Chrome reconocerá que no debe completar automáticamente este campo por alguna razón. (autocomplete = off no funciona ... tiene que ser una cadena aleatoria) Si está vacío y this.state.value está vacío, el autocompletado seguirá funcionando en el campo como se esperaba.