React: Bug: Firefox: Autocomplete/Autofill funktioniert immer noch nicht

Erstellt am 23. Mai 2020  ·  3Kommentare  ·  Quelle: facebook/react

Beschreibung, Schritte zum Reproduzieren und Sandbox-Beispiel siehe #17022!
Die native Autocomplete-Funktion von Firefox funktioniert immer noch nicht.

Dies betrifft auch andere Frameworks (antd, material UI):

Es wäre schön, wenn jemand aus der React-Community es versuchen könnte, denn ich denke, dass die native Autovervollständigung ein sehr wichtiges UX-Feature ist.

Unconfirmed

Hilfreichster Kommentar

Ich habe mir das angesehen und es scheint zu passieren, weil React das defaultValue des Eingabe-DOM-Knotens auf das aktuelle value für kontrollierte Eingaben setzt. Wenn Sie in Firefox etwas mit node.value === node.defaultValue einreichen, wird es nicht für das automatische Ausfüllen gespeichert. Es ist nirgendwo dokumentiert, ich habe gerade getestet (auch ohne React).

Entfernen dieses ""löst"" das Problem:
https://github.com/facebook/react/blob/1d85bb3ce13401644a5e345f8bc84522c59a951c/packages/react-dom/src/client/ReactDOMInput.js#L420

Der Grund, warum React die defaultValue dem aktuellen value ist, dass wenn Sie eine Eingabe mit type="reset" und darauf klicken, Sie leere Felder in Ihrem kontrollierten Bereich erhalten würden Eingaben, wenn Sie diese Zeile entfernt haben (das nächste erneute Rendern würde sie jedoch beheben). Zumindest verstehe ich das, wenn ich den Code durchstöbere.

Sie können die automatische Vervollständigung/Autofill-Funktion in Firefox für eine kontrollierte Eingabe verwenden, indem Sie defaultValue veranlassen, eine leere Zeichenfolge zurückzugeben:

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

Dies funktioniert, solange Sie kein type="reset" . Andernfalls werden Sie feststellen, dass alle Felder auf leer zurückgesetzt werden (das nächste erneute Rendern behebt sie jedoch). Ich würde dies jedoch nicht empfehlen, es ist ein "Hack" und ich habe es nirgendwo verwendet, um sagen zu können, dass es 100% zuverlässig ist.

Wie auch immer, dies ist wahrscheinlich ein Fehler in Firefox .. oder ein Feature- (Bug?) , Aber ich habe nichts in den Spezifikationen, MDN gefunden oder sonst wo, warum beschreibt node.value === node.defaultValue sollte für automatisches Ausfüllen des Sparens aus der Patsche helfen ️

Ich arbeite/arbeite an einer PR, um dieses Problem zu lösen. Aber vielleicht könnte Firefox es auf ihrer Seite lösen? 🙈 (unklar, ob es ein Bug ist)
Es wäre toll zu wissen, ob jemand aus dem React-Kernteam das Problem kennt und/oder was wir dagegen tun können.

Bearbeiten: Dies ist eine Demo, die das Problem in Firefox demonstriert. Es ist einfacher HTML + 3-Zeilen-JS-Code:
https://codesandbox.io/s/naughty-feather-vwl6v?file=/index.html
Es ist also kein React-Problem per se 🤔

Alle 3 Kommentare

Ich habe mir das angesehen und es scheint zu passieren, weil React das defaultValue des Eingabe-DOM-Knotens auf das aktuelle value für kontrollierte Eingaben setzt. Wenn Sie in Firefox etwas mit node.value === node.defaultValue einreichen, wird es nicht für das automatische Ausfüllen gespeichert. Es ist nirgendwo dokumentiert, ich habe gerade getestet (auch ohne React).

Entfernen dieses ""löst"" das Problem:
https://github.com/facebook/react/blob/1d85bb3ce13401644a5e345f8bc84522c59a951c/packages/react-dom/src/client/ReactDOMInput.js#L420

Der Grund, warum React die defaultValue dem aktuellen value ist, dass wenn Sie eine Eingabe mit type="reset" und darauf klicken, Sie leere Felder in Ihrem kontrollierten Bereich erhalten würden Eingaben, wenn Sie diese Zeile entfernt haben (das nächste erneute Rendern würde sie jedoch beheben). Zumindest verstehe ich das, wenn ich den Code durchstöbere.

Sie können die automatische Vervollständigung/Autofill-Funktion in Firefox für eine kontrollierte Eingabe verwenden, indem Sie defaultValue veranlassen, eine leere Zeichenfolge zurückzugeben:

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

Dies funktioniert, solange Sie kein type="reset" . Andernfalls werden Sie feststellen, dass alle Felder auf leer zurückgesetzt werden (das nächste erneute Rendern behebt sie jedoch). Ich würde dies jedoch nicht empfehlen, es ist ein "Hack" und ich habe es nirgendwo verwendet, um sagen zu können, dass es 100% zuverlässig ist.

Wie auch immer, dies ist wahrscheinlich ein Fehler in Firefox .. oder ein Feature- (Bug?) , Aber ich habe nichts in den Spezifikationen, MDN gefunden oder sonst wo, warum beschreibt node.value === node.defaultValue sollte für automatisches Ausfüllen des Sparens aus der Patsche helfen ️

Ich arbeite/arbeite an einer PR, um dieses Problem zu lösen. Aber vielleicht könnte Firefox es auf ihrer Seite lösen? 🙈 (unklar, ob es ein Bug ist)
Es wäre toll zu wissen, ob jemand aus dem React-Kernteam das Problem kennt und/oder was wir dagegen tun können.

Bearbeiten: Dies ist eine Demo, die das Problem in Firefox demonstriert. Es ist einfacher HTML + 3-Zeilen-JS-Code:
https://codesandbox.io/s/naughty-feather-vwl6v?file=/index.html
Es ist also kein React-Problem per se 🤔

Falls es jemand interessiert, habe ich das geöffnet:
https://bugzilla.mozilla.org/show_bug.cgi?id=1642570
😅

Ich glaube, das ist ein Duplikat von #15739

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen