React: Chrome Autofill überschreibt Werte für gesteuerte Komponenten

Scheint verursacht zu werden, wenn die "Wert" -Stütze (z Welches Chrom als Standardwert / Platzhalter für das Feld zu sehen scheint, entspricht dem eingefügten Wert des Feldes. Wenn React die Wertstütze bei Statusänderung aktualisiert, ändern wir den Standardwert / Platzhalter technisch so, dass er mit dem übereinstimmt, was wir eingeben. Chrome sieht dies also als unberührtes Feld an und überschreibt es beim automatischen Ausfüllen

Zum Beispiel. Geben Sie eine Zeichenfolge in das Feld für den Vornamen ein. React aktualisiert die Wertstütze auf das, was Sie eingegeben haben. Versuchen Sie es mit dem automatischen Ausfüllen der E-Mail, und das Feld für den Vornamen wird überschrieben.

Geben Sie jedoch eine Zeichenfolge in das Feld für den Vornamen ein, überprüfen Sie das Element und bearbeiten Sie die Vorname-Wert-Requisite in eine andere Zeichenfolge als die von Ihnen eingegebene. Versuchen Sie erneut, die E-Mail automatisch auszufüllen. Diesmal wird sie nicht überschrieben. Da der Wert nicht mit dem "Standard" -Wert übereinstimmt.

Ein anderer Weg, dies zu umgehen, ist onChange, update autocomplete = this.state.value. Und Chrome erkennt, dass dieses Feld aus irgendeinem Grund nicht automatisch ausgefüllt wird. (autocomplete = off funktioniert nicht ... es muss eine zufällige Zeichenfolge sein) Wenn leer und this.state.value leer ist, funktioniert das automatische Ausfüllen weiterhin wie erwartet auf dem Feld.

^^ Das stimmt. Hier ist ein Arbeitsbeispiel mit dem Vorschlag von onChange: https://jsfiddle.net/epicfaace/9p17e2qx/29/

Sehr interessant! Dies ist ein Nebeneffekt beim Synchronisieren des Wertattributs / der Eigenschaft bei Eingaben, die mir vorher nicht bekannt waren (danke, @ mabeabe28):

Wenn das value-Attribut mit der value-Eigenschaft identisch ist, geht Chrome davon aus, dass die Eingabe "unberührt" ist, und ersetzt die value-Eigenschaft während einer automatischen Ausfüllaktion

Ich frage mich, ob dies in anderen Browsern zutrifft.

Ich habe das Gefühl, dass wir Probleme beim automatischen Ausfüllen von Fehlern haben müssen, aber ich bin mir nicht sicher, ob eines davon dies dokumentiert. Ich habe auch einen Kern gemacht, der den nativen und den reaktiven Ansatz vergleicht:

https://codesandbox.io/s/01zr8pll00

Wenn das value-Attribut mit der value-Eigenschaft identisch ist, geht Chrome davon aus, dass die Eingabe "unberührt" ist, und ersetzt die value-Eigenschaft während einer automatischen Ausfüllaktion

Dies kann zumindest teilweise durch # 13525 behoben werden ("Keine Eingabewerte mehr im Wertattribut wiedergeben").