Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ETQ usager je ne veux pas pouvoir saisir un nombre invalide sans feedback #9516

Merged

Conversation

colinux
Copy link
Member

@colinux colinux commented Sep 25, 2023

Quand un usager remplissait une donnée invalide d'un champ nombre, l'autosave ne transmettrait pas la valeur au backend car le navigateur détecte la valeur comme invalide et on a aucun moyen de connaître la valeur saisie. On faisait un autosave d'un champ vide.

Cette PR :

  • remplace les type=number par un type=text avec un pattern et inputmode adaptés
  • formate les valeurs pour garantir un nombre valide et être comprise par le backend
  • continue de supporter les séparateurs de décimales . et , (on continue d'ignorer les séparateurs de milliers)

@colinux colinux added the bug label Sep 25, 2023
@colinux colinux marked this pull request as draft September 25, 2023 10:15
@colinux colinux force-pushed the fix-invalid-facultative-evaporation branch 2 times, most recently from a4a4639 to 255967d Compare September 26, 2023 14:33
@colinux colinux changed the title Intercepter les erreurs de validation navigateur pour prévenir l'usager plutôt que les ignorer silencieusement ETQ usager je veux voir un message d'erreur si je saisis une valeur invalide d'un champ nombre Sep 26, 2023
@colinux colinux requested a review from tchak September 26, 2023 14:37
@colinux colinux marked this pull request as ready for review September 26, 2023 14:37
@colinux colinux marked this pull request as draft September 26, 2023 15:14
@colinux colinux force-pushed the fix-invalid-facultative-evaporation branch from 255967d to 416db5a Compare September 26, 2023 17:03
@colinux colinux changed the title ETQ usager je veux voir un message d'erreur si je saisis une valeur invalide d'un champ nombre ETQ usager je ne veux pas pouvoir saisir un nombre invalide Sep 26, 2023
@colinux colinux force-pushed the fix-invalid-facultative-evaporation branch 2 times, most recently from d86a375 to b0c316b Compare September 26, 2023 17:10
@colinux colinux changed the title ETQ usager je ne veux pas pouvoir saisir un nombre invalide ETQ usager je ne veux pas pouvoir saisir un nombre invalide sans feedback Sep 26, 2023
@colinux colinux marked this pull request as ready for review September 26, 2023 17:12
Copy link
Member

@LeSim LeSim left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

top.

si en plus, tu peux au passage changer la description du champ decimal :

Vous pouvez saisir jusqu’à 3 décimales après la virgule. Exemple: 3,14

par

Vous pouvez saisir jusqu’à 3 décimales après la virgule. Exemple: 3,141

tu serais mon héros

@@ -1 +1 @@
= @form.number_field(:value, input_opts(id: @champ.input_id, aria: { describedby: @champ.describedby_id }, step: :any, required: @champ.required?))
= @form.text_field(:value, input_opts(id: @champ.input_id, aria: { describedby: @champ.describedby_id }, required: @champ.required?, pattern: "-?[0-9]+([\.,][0-9]{1,3})?", inputmode: :decimal, data: { controller: 'format decimal-number-input', format: :decimal }))
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

autoriser les espaces ? (mm chose pour les nombres entiers)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes je ferai ça dans une autre PR, ça touche à d'autres aspects: le formatteur JS et le backend qui doit les supprimer pour parser le string en nombre.
Au passage j'avais aussi passé du temps à essayer de cabler un truc plus général en guise de séparateur de milliers (pour accepter aussi les , et .) mais ça mène très trop loin car ces caractères sont sont aussi possibles comme séparateur de décimales, et un usager peut saisir dans un format autre que la locale de son navigateur…

Les input=number n'ont pas de value lorsque la valeur saisie n'est pas un
nombre. Par conséquent dans ces cas là, nous ne pouvions faire remonter
au backend pour validation / enregistrement, et il n'y avait aucun
feedback signalement l'erreur à l'usager.

On les convertit en inputs texte, avec les adaptations nécessaires
pour montrer le pavé numérique sur mobile, et un style correct.
@colinux colinux force-pushed the fix-invalid-facultative-evaporation branch from b0c316b to e492c8a Compare September 28, 2023 13:27
@colinux colinux enabled auto-merge September 28, 2023 13:28
@colinux colinux added this pull request to the merge queue Sep 28, 2023
Merged via the queue into demarches-simplifiees:main with commit 2cec441 Sep 28, 2023
@colinux colinux deleted the fix-invalid-facultative-evaporation branch September 28, 2023 14:02
@sentry-io
Copy link

sentry-io bot commented Oct 6, 2023

Suspect Issues

This pull request was deployed and Sentry observed the following issues:

  • ‼️ ReferenceError: 'InputEvent' is undefined <object>.value(app/javascript/controllers/decim... View Issue

Did you find this useful? React with a 👍 or 👎

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants