React: Error: Firefox: Autocompletar / Autocompletar aún no funciona

Creado en 23 may. 2020 · 3Comentarios · Fuente: facebook/react

Descripción, pasos para reproducir y ejemplo de caja de arena, ver # 17022.
La función nativa de autocompletar de Firefox todavía no funciona.

Esto también afecta a otros marcos (antd, material UI):

Sería bueno si alguien de la comunidad de react pudiera intentarlo porque creo que el autocompletado nativo es una característica de UX muy importante.

Unconfirmed

Fuente

Hadsch

Comentario más útil

He investigado esto y parece suceder porque React establece el defaultValue del nodo DOM de entrada en el actual value para entradas controladas. Cuando envías algo en Firefox donde node.value === node.defaultValue no lo guarda para autocompletar. No está documentado en ninguna parte, acabo de enterarme de las pruebas (sin React también).

Eliminar esto "" resuelve "" el problema:
https://github.com/facebook/react/blob/1d85bb3ce13401644a5e345f8bc84522c59a951c/packages/react-dom/src/client/ReactDOMInput.js#L420

La razón por la que React asigna defaultValue al value actual es porque si tiene una entrada con type="reset" y hace clic en ella, obtendrá campos en blanco en su control entradas si eliminó esa línea (la próxima repetición las arreglaría). Al menos es lo que entiendo al navegar por el código.

Puede hacer que el autocompletar / autocompletar funcione en Firefox en una entrada controlada haciendo que defaultValue devuelva una cadena vacía:

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

Esto funciona siempre que no tenga un type="reset" . De lo contrario, notará que todos los campos se restablecen como en blanco (sin embargo, la siguiente representación los corrige). Sin embargo, no recomendaría esto, es un "truco" y no lo he usado en ninguna parte para poder decir que es 100% confiable.

De todos modos, esto es probablemente un error en Firefox ... o una característica- (¿error?) Pero no he encontrado nada en las especificaciones, MDN o en otro lugar que describa por qué node.value === node.defaultValue debería rescatar el ahorro para autocompletar 🤷‍♀️

Estoy / estaba trabajando en un PR para resolver esto ... pero, ¿tal vez Firefox podría resolverlo de su lado? 🙈 (no está claro si es un error)
Sería genial saber si alguien del equipo central de React está al tanto del problema y / o qué podemos hacer al respecto.

Editar: esta es una demostración que demuestra el problema en Firefox. Es un código JS simple de HTML + 3 líneas:
https://codesandbox.io/s/naughty-feather-vwl6v?file=/index.html
Entonces no es un problema de React per se 🤔

eddyw en 30 may. 2020

👍3

Todos 3 comentarios

Eliminar esto "" resuelve "" el problema:
https://github.com/facebook/react/blob/1d85bb3ce13401644a5e345f8bc84522c59a951c/packages/react-dom/src/client/ReactDOMInput.js#L420

Puede hacer que el autocompletar / autocompletar funcione en Firefox en una entrada controlada haciendo que defaultValue devuelva una cadena vacía:

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