Vaadin-combo-box: Coincé dans un état invalide

Créé le 22 juil. 2019  ·  6Commentaires  ·  Source: vaadin/vaadin-combo-box

La description


Lorsqu'un vaadin-combo-box est requis et que le vaadin-combo-box a été sélectionné, mais que rien n'est choisi, le vaadin-text-field interne sera marqué comme invalide lors de la désélection du vaadin-combo-box . Cependant, si l'attribut requis est supprimé entre-temps, le vaadin-text-field interne est toujours dans l'état invalide.

Résultat attendu


La modification des attributs (ou au moins de l'attribut requis) sur le vaadin-combo-box devrait déclencher une revalidation du sous-jacent vaadin-text-field .

Résultat réel


Le vaadin-text-field est bloqué dans un état invalide. Le formulaire ne peut pas être soumis en raison de cet état invalide.

Démo en direct


https://ring-umbra.glitch.me

Étapes à reproduire

  1. Ouvrir la démo
  2. Cliquez sur le vaadin-combo-box . Les options seront affichées, mais ne sélectionnez pas un élément (cliquez quelque part dans l'espace blanc)
  3. Cochez la case pour rendre le champ obligatoire.
  4. Répétez l'étape 2, le vaadin-combo-box deviendra rouge et sera dans un état invalide.
  5. Décochez la case, le champ n'est plus obligatoire
  6. Répétez l'étape 2, le vaadin-combo-box restera dans un état invalide
  7. Sélectionnez quelque chose dans le vaadin-combo-box
  8. Utilisez le bouton effacer pour vider le vaadin-combo-box : le vaadin-combo-box est toujours dans un état invalide, bien qu'il ne soit plus nécessaire.

Changer l'attribut invalide sur le vaadin-combo-box résout pas non plus le problème, il semble que cette valeur ne soit pas reflétée dans le vaadin-text-field interne.

Navigateurs concernés

  • [x] Chrome
  • [x] Firefox
  • [ ] Safari
  • [x] Bord
  • [x] IE 11
  • [ ] Safari iOS
  • [ ] Android Chrome

_Je pense que les autres navigateurs ont le même problème, cependant je n'ai pas pu les tester_

bug

Tous les 6 commentaires

Cela semble être un bogue dans vaadin-text-field place. vaadin-combo-box synchronise simplement les propriétés required et invalid avec les vaadin-text-field internes.

Je pense que le changement dynamique de l'état required (ou d'autres contraintes de validation) n'a tout simplement pas été pris en compte lors du développement du composant.

La validation considère required , pattern , maxlength et minlength . Si l'un d'entre eux est défini, il définit invalid booléen en fonction de la valeur de retour de checkValidity() sur le <input> natif. Si aucun de ceux-ci n'est défini, vous pouvez toujours définir manuellement invalid sur true ou false fonction de votre propre logique et vaadin-text-field conserve l'état invalide tel qu'il a été été fixé.

Le problème semble être que lorsque vous n'avez défini qu'une seule de ces contraintes de validation (par exemple required ) et que le champ a été validé et devient invalide, puis que vous supprimez la contrainte, il ne s'exécute pas checkValidity() sur l'entrée native et il conserve l'état invalid (comme s'il avait été ajouté manuellement). Fondamentalement, le champ de texte ne supprime jamais automatiquement l'état invalid lorsqu'il n'y a pas de contraintes de validation actives.

Je pense que la logique appropriée ici serait d'observer quand l'une des contraintes required , pattern , maxlength ou minlength est supprimée _et_ invalid == true déjà, puis définissez this.invalid = this.inputElement.checkValidity();

Cela peut être reproduit avec vaadin-text-field simplement en ayant :

<vaadin-text-field required="{{tfRequired}}"></vaadin-text-field><br>
<label>Required <input type="checkbox" checked="{{tfRequired::change}}"></label>
  1. cochez la case (rend le champ de texte obligatoire)
  2. focus et déconcentre le champ de texte (le rend invalide car il est toujours vide)
  3. désactiver la case à cocher (rend le champ de texte non requis)
  4. écrivez quelque chose dans le champ de texte et décochez-le, notez que le champ de texte est toujours affiché comme non valide

J'ai ouvert un problème à ce sujet ici https://github.com/vaadin/vaadin-text-field/issues/400 mais je laisserai ce problème de zone de liste déroulante ici pour une meilleure visibilité si quelqu'un d'autre remarque le problème avec la zone de liste déroulante. Cela devrait être fermé une fois le problème de champ de texte ci-dessus résolu.

Ce correctif a été publié dans vaadin-text-field v2.3.9 et v2.4.10 .

Je peux confirmer qu'il fonctionne comme prévu maintenant. Merci pour le bon travail, @Haprog! ??

D'ailleurs. à ma connaissance, les WebJars pour vaadin-text-field v2.3.9 et v2.4.10 sont cassés, donc si vous devez les utiliser depuis Java (Vaadin 10–13 ou Vaadin 14 en mode compatibilité), vous devez attendre un peu. Nous devrions bientôt sortir les v2.3.10 et v2.4.11 avec des WebJars fonctionnels.

Cette page vous a été utile?
0 / 5 - 0 notes