React: Bug : L'entrée minLength ne fonctionne pas après le changement de type
J'ai une entrée avec un mot de passe de type avec minLength 8, et j'ai une bascule pour changer le type en texte (bascule de mot de passe).
lorsque je tape avec une longueur < 8 et que j'appuie sur soumettre, cela empêche de soumettre. mais, lorsque je bascule le mot de passe pour qu'il change le type en texte et soumet le formulaire, il peut être soumis. d'ailleurs j'utilise useRef()
Réagir version :
réagir : ^17.0.1
réagir-dom: ^17.0.1
Étapes à reproduire
- type caractère < minLongueur
- soumettre le formulaire
- basculer le type de formulaire
- soumettre le formulaire
Lien vers l'exemple de code : DEMO
Le comportement actuel
Le formulaire est soumis même s'il est inférieur à minLength
Le comportement attendu
Le formulaire n'est pas soumis lorsqu'il est sous minLength
Vandoct
Tous les 3 commentaires
Merci pour le rapport.
Je peux repérer deux problèmes :
- votre démo utilise
minLength="3"pas 8.
Taper moins de 8 caractères est acceptable tant que vous en tapez plus de 2 minLengthn'est pas pris en charge dans IE 11 : https://caniuse.com/input-minlength
J'ai testé votre démo dans Chrome 85 et je n'ai pas pu la soumettre lorsque j'ai saisi moins de 2 caractères.
Quel navigateur utilisiez-vous lors du test de votre code ?
eps1lon
le 5 nov. 2020
J'utilise mac os 10.14.6 et le navigateur Safari 13.0.5 (14608.5.12)
j'ai oublié quelque chose, ne tapez aucun caractère après l'avoir basculé
d'ailleurs, lorsque j'essaie avec Chrome 86.0.4240.183, cela fonctionne bien. je pense que cela n'arrive qu'en safari
Étapes pour reproduire 1
- type caractère < minLongueur
- soumettre le formulaire
- basculer le type de formulaire
- ne tapez rien après basculement
- soumettre le formulaire
- le formulaire sera soumis
Étapes pour reproduire 2
- type caractère < minLongueur
- soumettre le formulaire
- basculer le type de formulaire
- tapez n'importe quoi après le basculement
- soumettre le formulaire
- le formulaire ne sera pas soumis
Vandoct
le 5 nov. 2020
Merci, je peux reproduire ça.
En général, toute validation est ignorée si l'entrée est vierge. Si vous soumettez le formulaire sans rien taper, le minLength est ignoré.
Safari marque correctement le formulaire comme non valide si vous avez tapé quelque chose qui ne respecte pas toutes les contraintes. Cependant, lorsque le type change, Safari semble considérer l'entrée vierge. Par conséquent, une valeur non valide est soumise si le type modifié une fois la saisie terminée.
La question est de savoir si React peut ou devrait corriger cette bizarrerie ou si Safari devrait résoudre ce problème.
Éditer:
Reproduction minimale sans aucune réaction : https://codesandbox.io/s/condescending-bhabha-n4374?file=/src/index.js
Si vous avez besoin de ce comportement, je vous suggère de signaler un bogue avec Safari.
eps1lon
le 5 nov. 2020
Questions connexes
tleunen
·
3Commentaires
Prinzhorn
·
3Commentaires
jimfb
·
3Commentaires
zpao
·
3Commentaires
krave1986
·
3Commentaires
Commentaire le plus utile
Merci, je peux reproduire ça.
En général, toute validation est ignorée si l'entrée est vierge. Si vous soumettez le formulaire sans rien taper, le
minLengthest ignoré.Safari marque correctement le formulaire comme non valide si vous avez tapé quelque chose qui ne respecte pas toutes les contraintes. Cependant, lorsque le
typechange, Safari semble considérer l'entrée vierge. Par conséquent, une valeur non valide est soumise si letypemodifié une fois la saisie terminée.La question est de savoir si React peut ou devrait corriger cette bizarrerie ou si Safari devrait résoudre ce problème.
Éditer:
Reproduction minimale sans aucune réaction : https://codesandbox.io/s/condescending-bhabha-n4374?file=/src/index.js
Si vous avez besoin de ce comportement, je vous suggère de signaler un bogue avec Safari.