fix(ui): affiche la bordure des champs en rouge quand ils sont invalides

[sokl-octo]

J'ai pas mal galéré sur ce fix à la fois à cause d'impact et à la fois parce que j'ai appris un peu plus comment fonctionne la pseudo-classe :invalid, les options envisagées / testées :

• Un input doit être touched quand on soumet le formulaire : complexité pour faire le lien entre la soumission de formulaire et le composant
• touched ne comprend pas la soumission du formulaire mais une nouvelle variable doit permettre de gérer cet état : même complexité que le premier à quelques détails près
• Suppression de la règle [data-touched="true"] pour l'affichage de la bordure en rouge : C'est ici que j'ai compris que :invalidétait natif car la bordure devenait par défaut en rouge sans qu'un appel à checkValidity ait été fait. J'ai même tenté d'avoir une ref qui track si on est dans le premier render pour ne pas checkValidity avant de comprendre que c'était inutile
• L'utilisation de la pseudo-classe :user-invalid qui je pense est le comportement natif que touched veut simuler. Le soucis est la compat à 92.5% mais le fix est élégant et je pense même qu'il permettrait d'aller simplifier le code au-delà de juste réparer le problème du ticket

[Mintoo200]

• Suppression de la règle [data-touched="true"] pour l'affichage de la bordure en rouge : C'est ici que j'ai compris que :invalidétait natif car la bordure devenait par défaut en rouge sans qu'un appel à checkValidity ait été fait. J'ai même tenté d'avoir une ref qui track si on est dans le premier render pour ne pas checkValidity avant de comprendre que c'était inutile

En effet, :invalid match dès que le champ est invalide, qu'il ait été touché par l'utilisateur ou pas

• L'utilisation de la pseudo-classe :user-invalid qui je pense est le comportement natif que touched veut simuler. Le soucis est la compat à 92.5% mais le fix est élégant et je pense même qu'il permettrait d'aller simplifier le code au-delà de juste réparer le problème du ticket

C'est la même réflexion qu'on s'était faite quand on a implémenté le touched à la main. On a repris l'algorithme décrit sur le MDN pour :user-valid mais je me suis loupé sur le submit... Ce qui est assez fou, vu que j'ai ouvert une PR pour rendre la doc plus explicite 🤦