React: Bug: Eingabe von minLength funktioniert nicht nach Typänderung
Ich habe eine Eingabe mit dem Typ Passwort mit minLength 8, und ich habe einen Schalter, um den Typ in Text zu ändern (Passwort-Toggle).
Wenn ich mit Länge < 8 tippe und auf Senden drücke, wird das Senden verhindert. aber wenn ich das Passwort umschalte, so dass es den Typ in Text ändere und das Formular absende, kann es gesendet werden. Übrigens verwende ich useRef()
Reaktionsversion:
reagieren: ^17.0.1
Reaktionsdom: ^17.0.1
Schritte zum Reproduzieren
- Typzeichen < minLänge
- Formular senden
- Formulartyp umschalten
- Formular senden
Link zum Codebeispiel: DEMO
Das aktuelle Verhalten
Das Formular wird gesendet, auch wenn es unter minLength . ist
Das erwartete Verhalten
Das Formular wird nicht gesendet, wenn es unter minLength
Vandoct
Alle 3 Kommentare
Danke für den Bericht.
Ich kann zwei Probleme erkennen:
- Ihre Demo verwendet
minLength="3"nicht 8.
Die Eingabe von weniger als 8 Zeichen ist in Ordnung, solange Sie mehr als 2 . eingeben minLengthwird in IE 11 nicht unterstützt: https://caniuse.com/input-minlength
Ich habe Ihre Demo in Chrome 85 getestet und konnte sie nicht senden, wenn ich weniger als 2 Zeichen eingegeben habe.
Welchen Browser hast du beim Testen deines Codes verwendet?
eps1lon
am 5. Nov. 2020
Ich verwende Mac OS 10.14.6 und den Browser Safari 13.0.5 (14608.5.12)
Ich habe etwas vergessen, gib nach dem Umschalten keine Zeichen ein
Übrigens, wenn ich es mit Chrome 86.0.4240.183 versuche, funktioniert es gut. Ich glaube, das passiert nur in Safari
Schritte zum Reproduzieren von 1
- Typzeichen < minLänge
- Formular senden
- Formulartyp umschalten
- Geben Sie nach dem Umschalten nichts ein
- Formular senden
- das Formular wird gesendet
Schritte zur Reproduktion von 2
- Typzeichen < minLänge
- Formular senden
- Formulartyp umschalten
- Geben Sie nach dem Umschalten etwas ein
- Formular senden
- das Formular wird nicht gesendet
Vandoct
am 5. Nov. 2020
Danke, das kann ich reproduzieren.
Im Allgemeinen wird jede Validierung ignoriert, wenn die Eingabe makellos ist. Wenn Sie das Formular absenden, ohne etwas einzugeben, wird minLength ignoriert.
Safari markiert das Formular ordnungsgemäß als ungültig, wenn Sie etwas eingegeben haben, das nicht alle Einschränkungen erfüllt. Wenn sich jedoch type ändert, scheint Safari die Eingabe als makellos zu betrachten. Daher wird ein ungültiger Wert übermittelt, wenn sich type ändert, nachdem die Eingabe abgeschlossen ist.
Die Frage ist, ob React diese Macke beheben kann oder sollte oder ob Safari dies beheben sollte.
Bearbeiten:
Minimale Repro ohne Reaktion: https://codesandbox.io/s/condescending-bhabha-n4374?file=/src/index.js
Wenn Sie dieses Verhalten benötigen, schlage ich vor, einen Fehler bei Safari einzureichen.
eps1lon
am 5. Nov. 2020
Verwandte Themen
DimitarChristoff
·
3Kommentare
bloodyowl
·
3Kommentare
tleunen
·
3Kommentare
jmullo
·
3Kommentare
MoOx
·
3Kommentare
Hilfreichster Kommentar
Danke, das kann ich reproduzieren.
Im Allgemeinen wird jede Validierung ignoriert, wenn die Eingabe makellos ist. Wenn Sie das Formular absenden, ohne etwas einzugeben, wird
minLengthignoriert.Safari markiert das Formular ordnungsgemäß als ungültig, wenn Sie etwas eingegeben haben, das nicht alle Einschränkungen erfüllt. Wenn sich jedoch
typeändert, scheint Safari die Eingabe als makellos zu betrachten. Daher wird ein ungültiger Wert übermittelt, wenn sichtypeändert, nachdem die Eingabe abgeschlossen ist.Die Frage ist, ob React diese Macke beheben kann oder sollte oder ob Safari dies beheben sollte.
Bearbeiten:
Minimale Repro ohne Reaktion: https://codesandbox.io/s/condescending-bhabha-n4374?file=/src/index.js
Wenn Sie dieses Verhalten benötigen, schlage ich vor, einen Fehler bei Safari einzureichen.