React: Bug: Firefox: Autocomplete / Autofill ainda não funciona

Criado em 23 mai. 2020 · 3Comentários · Fonte: facebook/react

Descrição, etapas para reproduzir e exemplo de sandbox, consulte # 17022!
A função autocomplete nativa do firefox ainda não está funcionando.

Isso também afeta outras estruturas (antd, IU material):

Seria bom se alguém da comunidade de reação pudesse tentar, porque acho que o preenchimento automático nativo é um recurso de UX muito importante.

Unconfirmed

Fonte

Hadsch

Comentários muito úteis

Eu examinei isso e parece acontecer porque o React define defaultValue do nó DOM de entrada para o value atual para entradas controladas. Quando você envia algo no Firefox onde node.value === node.defaultValue não o salva para preenchimento automático. Não está documentado em lugar nenhum, acabei de descobrir o teste (sem React também).

Remover este "" resolve "" o problema:
https://github.com/facebook/react/blob/1d85bb3ce13401644a5e345f8bc84522c59a951c/packages/react-dom/src/client/ReactDOMInput.js#L420

A razão pela qual o React atribui defaultValue ao atual value é porque se você tiver uma entrada com type="reset" e clicar nela, obterá campos em branco no seu controlador entradas se você removeu essa linha (a próxima re-renderização iria corrigi-los). Pelo menos é o que eu entendo ao navegar pelo código.

Você poderia fazer o autocomplete / autofill funcionar no Firefox em uma entrada controlada fazendo defaultValue retornar uma string vazia:

  function handleChange(event) {
    Object.defineProperty(event.target, "defaultValue", {
      configurable: true,
      get() { return "" },
      set() {},
    });
    setValue(event.target.value);
  }

Isso funciona contanto que você não tenha um type="reset" . Caso contrário, você notará que todos os campos são redefinidos como em branco (a próxima renderização os corrige). Eu não recomendaria isso, é um "hack" e eu não usei em lugar nenhum para poder dizer que é 100% confiável.

De qualquer forma, isso provavelmente é um bug no Firefox .. ou um recurso- (bug?), Mas eu não encontrei nada nas especificações, MDN ou em outro lugar que descreva por que node.value === node.defaultValue deveria sair da economia para preenchimento automático 🤷‍♀️

Estou / estava trabalhando em um RP para resolver isso .. mas talvez o Firefox pudesse resolver do lado deles? 🙈 (não está claro se é um bug)
Seria ótimo saber se alguém da equipe principal do React está ciente do problema e / ou o que podemos fazer a respeito.

Edit: esta é uma demonstração que demonstra o problema no Firefox. É HTML simples + código JS de 3 linhas:
https://codesandbox.io/s/naughty-feather-vwl6v?file=/index.html
Portanto, não é um problema do React em si 🤔

eddyw em 30 mai. 2020

👍3

Todos 3 comentários

Remover este "" resolve "" o problema:
https://github.com/facebook/react/blob/1d85bb3ce13401644a5e345f8bc84522c59a951c/packages/react-dom/src/client/ReactDOMInput.js#L420

Você poderia fazer o autocomplete / autofill funcionar no Firefox em uma entrada controlada fazendo defaultValue retornar uma string vazia:

  function handleChange(event) {
    Object.defineProperty(event.target, "defaultValue", {
      configurable: true,
      get() { return "" },
      set() {},
    });
    setValue(event.target.value);
  }