React: O preenchimento automático do Chrome substitui valores em componentes controlados
Você quer solicitar um recurso ou relatar um bug ?
Reportar um erro. Relatado inicialmente em https://github.com/mozilla-services/react-jsonschema-form/issues/1153
Qual é o comportamento atual?
O preenchimento automático sobrescreve os valores existentes nos campos quando esses campos são componentes controlados no React.
Consulte https://jsfiddle.net/epicfaace/9p17e2qx/21/ - para testar isso, adicione um "Endereço salvo" nas opções do Chrome.
Qual é o comportamento esperado?
O preenchimento automático não substitui os campos existentes. Fiz um JSFiddle com um formulário HTML simples, que funciona com o comportamento esperado.
Veja https://jsfiddle.net/epicfaace/1my3f9n4/6/
Quais versões do React e quais navegadores / sistemas operacionais são afetados por esse problema?
React 15.3.2
Chrome 71.0.3578.98
epicfaace
Todos 4 comentários
Parece ser causado se o "valor" prop (por exemplo que o cromo parece ver como um valor / espaço reservado padrão para o campo) é igual ao valor inserido do campo. Portanto, quando reagirmos atualizou a proposta de valor na mudança de estado, estamos tecnicamente alterando o valor / espaço reservado padrão para corresponder a tudo o que digitamos. Portanto, o Chrome vê isso como um campo intocado e substituirá no preenchimento automático
Por exemplo. Digite uma string no campo de nome ... react atualizará o valor prop para o que você digitou. Tente o preenchimento automático do e-mail e ele substituirá o campo de nome.
No entanto, digite uma string no campo de nome, inspecione o elemento e edite o valor prop do primeiro nome para uma string diferente da que você digitou e tente o preenchimento automático de e-mail novamente ... desta vez, ele não substituirá. . visto que o valor não é igual ao valor "padrão".
Outra maneira de contornar isso é onChange, atualize autocomplete = this.state.value. E o Chrome reconhecerá o não preenchimento automático deste campo por algum motivo. (autocomplete = off não funciona ... tem que ser qualquer string aleatória) Se vazio e this.state.value estiver vazio, o preenchimento automático ainda funcionará no campo conforme o esperado.
mabeabe28
em 24 jan. 2019
^^ Isso mesmo. Aqui está um exemplo funcional usando a sugestão onChange: https://jsfiddle.net/epicfaace/9p17e2qx/29/
epicfaace
em 25 jan. 2019
Muito interessante! Este é um efeito colateral da sincronização do atributo / propriedade do valor nas entradas que eu não conhecia antes (obrigado, @ mabeabe28):
Se o atributo de valor for igual à propriedade de valor, o Chrome presume que a entrada está "intacta" e substituirá a propriedade de valor durante uma ação de preenchimento automático
Eu me pergunto se isso é verdade em outros navegadores.
Acho que devemos ter problemas de preenchimento automático de rastreamento de bug, mas não tenho certeza se algum deles documenta isso. Eu também fiz uma ideia que compara a abordagem nativa e React:
nhunzaker
em 28 jan. 2019
Se o atributo de valor for igual à propriedade de valor, o Chrome presume que a entrada está "intacta" e substituirá a propriedade de valor durante uma ação de preenchimento automático
Isso pode ser pelo menos parcialmente resolvido por # 13525 ("Pare de refletir os valores de entrada no atributo de valor").
beheh
em 4 fev. 2019
Questões relacionadas
bloodyowl
·
3Comentários
framerate
·
3Comentários
jimfb
·
3Comentários
zpao
·
3Comentários
kocokolo
·
3Comentários
Comentários muito úteis
Parece ser causado se o "valor" prop (por exemplo que o cromo parece ver como um valor / espaço reservado padrão para o campo) é igual ao valor inserido do campo. Portanto, quando reagirmos atualizou a proposta de valor na mudança de estado, estamos tecnicamente alterando o valor / espaço reservado padrão para corresponder a tudo o que digitamos. Portanto, o Chrome vê isso como um campo intocado e substituirá no preenchimento automático
Por exemplo. Digite uma string no campo de nome ... react atualizará o valor prop para o que você digitou. Tente o preenchimento automático do e-mail e ele substituirá o campo de nome.
No entanto, digite uma string no campo de nome, inspecione o elemento e edite o valor prop do primeiro nome para uma string diferente da que você digitou e tente o preenchimento automático de e-mail novamente ... desta vez, ele não substituirá. . visto que o valor não é igual ao valor "padrão".
Outra maneira de contornar isso é onChange, atualize autocomplete = this.state.value. E o Chrome reconhecerá o não preenchimento automático deste campo por algum motivo. (autocomplete = off não funciona ... tem que ser qualquer string aleatória) Se vazio e this.state.value estiver vazio, o preenchimento automático ainda funcionará no campo conforme o esperado.