React: Bug : Firefox : la saisie semi-automatique/le remplissage automatique ne fonctionne toujours pas

Créé le 23 mai 2020 · 3Commentaires · Source: facebook/react

Description, étapes de reproduction et exemple de bac à sable voir #17022 !
La fonction de saisie semi-automatique native de firefox ne fonctionne toujours pas.

Cela affecte également d'autres frameworks (antd, material UI):

Ce serait bien si quelqu'un de la communauté React pouvait essayer car je pense que la saisie semi-automatique native est une fonctionnalité UX très importante.

Unconfirmed

Source

Hadsch

Commentaire le plus utile

J'ai examiné cela et cela semble se produire parce que React définit le defaultValue du nœud DOM d'entrée sur le value actuel pour les entrées contrôlées. Lorsque vous soumettez quelque chose dans Firefox où node.value === node.defaultValue ne l'enregistre pas pour le remplissage automatique. Ce n'est documenté nulle part, je viens de découvrir des tests (sans React aussi).

La suppression de ce "" résout "" le problème :
https://github.com/facebook/react/blob/1d85bb3ce13401644a5e345f8bc84522c59a951c/packages/react-dom/src/client/ReactDOMInput.js#L420

La raison pour laquelle React attribue le defaultValue au value actuel est que si vous avez une entrée avec type="reset" et que vous cliquez dessus, vous obtiendrez des champs vides dans votre entrées si vous avez supprimé cette ligne (le prochain rendu les corrigera cependant). C'est du moins ce que j'ai compris en parcourant le code.

Vous pouvez faire fonctionner la saisie semi-automatique/le remplissage automatique sur Firefox sur une entrée contrôlée en faisant en sorte que defaultValue renvoie une chaîne vide :

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

Cela fonctionne tant que vous n'avez pas de type="reset" . Sinon, vous remarquerez que tous les champs sont réinitialisés comme vides (le prochain rendu les corrige cependant). Je ne le recommanderais pas cependant, c'est un "hack" et je ne l'ai utilisé nulle part pour pouvoir dire qu'il est fiable à 100%.

Quoi qu'il en soit, ce qui est probablement un bug dans Firefox .. ou des fonctions intégrées (bug?) Mais je n'ai rien trouvé dans les spécifications, MDN ou ailleurs qui décrit pourquoi node.value === node.defaultValue en liberté sous caution devrait d'épargner pour autofill 🤷‍♀️

Je travaillais/je travaillais sur un PR pour résoudre ce problème .. mais peut-être que Firefox pourrait le résoudre de leur côté ? 🙈 (pas clair si c'est un bug)
Ce serait formidable de savoir si quelqu'un de l'équipe principale de React est au courant du problème et/ou ce que nous pourrions faire à ce sujet.

Edit : il s'agit d'une démo qui illustre le problème dans Firefox. C'est du code HTML + 3 lignes JS :
https://codesandbox.io/s/naughty-feather-vwl6v?file=/index.html
Ce n'est donc pas un problème React en soi 🤔

eddyw le 30 mai 2020

👍3

Tous les 3 commentaires

La suppression de ce "" résout "" le problème :
https://github.com/facebook/react/blob/1d85bb3ce13401644a5e345f8bc84522c59a951c/packages/react-dom/src/client/ReactDOMInput.js#L420

Vous pouvez faire fonctionner la saisie semi-automatique/le remplissage automatique sur Firefox sur une entrée contrôlée en faisant en sorte que defaultValue renvoie une chaîne vide :

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