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.
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
Hilfreichster Kommentar
Ich habe mir das angesehen und es scheint zu passieren, weil React das
defaultValue
des Eingabe-DOM-Knotens auf das aktuellevalue
für kontrollierte Eingaben setzt. Wenn Sie in Firefox etwas mitnode.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 aktuellenvalue
ist, dass wenn Sie eine Eingabe mittype="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: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 🤔