React: La saisie automatique de Chrome écrase les valeurs des composants contrôlés
Voulez-vous demander une fonctionnalité ou signaler un bogue ?
Signaler un bug. Initialement signalé dans https://github.com/mozilla-services/react-jsonschema-form/issues/1153
Quel est le comportement actuel?
Le remplissage automatique écrase les valeurs existantes dans les champs lorsque ces champs sont des composants contrôlés dans React.
Voir https://jsfiddle.net/epicfaace/9p17e2qx/21/ - pour tester cela, ajoutez une "Adresse enregistrée" dans les options de Chrome.
Quel est le comportement attendu?
La saisie automatique ne remplace pas les champs existants. J'ai créé un JSFiddle avec un formulaire HTML simple, qui fonctionne avec le comportement attendu.
Voir https://jsfiddle.net/epicfaace/1my3f9n4/6/
Quelles versions de React et quel navigateur / système d'exploitation sont concernés par ce problème?
Réagir 15.3.2
Chrome 71.0.3578.98
epicfaace
Tous les 4 commentaires
Semble être causé si l'accessoire "valeur" (par exemple que chrome semble voir comme valeur / espace réservé par défaut pour le champ) est égal à la valeur insérée du champ. Ainsi, lorsque react a mis à jour la valeur prop lors du changement d'état, nous modifions techniquement la valeur / l'espace réservé par défaut pour qu'elle corresponde à tout ce que nous saisissons. Donc, chrome voit alors cela comme un champ intact et écrasera lors du remplissage automatique
Par exemple. Tapez une chaîne dans le champ du prénom ... react mettra à jour la valeur prop à tout ce que vous avez tapé. Essayez le remplissage automatique de l'e-mail et il écrasera le champ du prénom.
Cependant, saisissez une chaîne dans le champ du prénom, puis inspectez l'élément et modifiez la valeur du prénom avec une chaîne autre que celle que vous avez saisie, puis réessayez la saisie automatique des e-mails ... cette fois, elle ne remplacera pas. . puisque la valeur n'est pas la même que la valeur "par défaut".
OnChange, met à jour autocomplete = this.state.value. Et Chrome reconnaîtra ne pas remplir automatiquement ce champ pour une raison quelconque. (autocomplete = off ne fonctionne pas ... il doit s'agir d'une chaîne aléatoire) Si vide et this.state.value est vide, alors le remplissage automatique fonctionnera toujours sur le champ comme prévu.
mabeabe28
le 24 janv. 2019
^^ C'est vrai. Voici un exemple de travail utilisant la suggestion onChange: https://jsfiddle.net/epicfaace/9p17e2qx/29/
epicfaace
le 25 janv. 2019
Très intéressant! C'est un effet secondaire de la synchronisation de l'attribut / propriété de valeur sur les entrées dont je n'étais pas au courant auparavant (merci, @ mabeabe28):
Si l'attribut value est le même que la propriété value, Chrome suppose que l'entrée est "intacte" et remplacera la propriété value lors d'une action de saisie automatique
Je me demande si cela est vrai dans d'autres navigateurs.
Je pense que nous devons avoir des problèmes de remplissage automatique de suivi des bogues, mais je ne suis pas sûr que l'un d'entre eux le documente. J'ai également fait un résumé qui compare l'approche native et React:
nhunzaker
le 28 janv. 2019
Si l'attribut value est le même que la propriété value, Chrome suppose que l'entrée est "intacte" et remplacera la propriété value lors d'une action de saisie automatique
Cela peut être au moins partiellement résolu par # 13525 ("Arrêter de refléter les valeurs d'entrée dans l'attribut value").
beheh
le 4 févr. 2019
Questions connexes
Prinzhorn
·
3Commentaires
jvorcak
·
3Commentaires
jmullo
·
3Commentaires
framerate
·
3Commentaires
huxiaoqi567
·
3Commentaires
Commentaire le plus utile
Semble être causé si l'accessoire "valeur" (par exemple que chrome semble voir comme valeur / espace réservé par défaut pour le champ) est égal à la valeur insérée du champ. Ainsi, lorsque react a mis à jour la valeur prop lors du changement d'état, nous modifions techniquement la valeur / l'espace réservé par défaut pour qu'elle corresponde à tout ce que nous saisissons. Donc, chrome voit alors cela comme un champ intact et écrasera lors du remplissage automatique
Par exemple. Tapez une chaîne dans le champ du prénom ... react mettra à jour la valeur prop à tout ce que vous avez tapé. Essayez le remplissage automatique de l'e-mail et il écrasera le champ du prénom.
Cependant, saisissez une chaîne dans le champ du prénom, puis inspectez l'élément et modifiez la valeur du prénom avec une chaîne autre que celle que vous avez saisie, puis réessayez la saisie automatique des e-mails ... cette fois, elle ne remplacera pas. . puisque la valeur n'est pas la même que la valeur "par défaut".
OnChange, met à jour autocomplete = this.state.value. Et Chrome reconnaîtra ne pas remplir automatiquement ce champ pour une raison quelconque. (autocomplete = off ne fonctionne pas ... il doit s'agir d'une chaîne aléatoire) Si vide et this.state.value est vide, alors le remplissage automatique fonctionnera toujours sur le champ comme prévu.