chore(champs-number): render as text input to validate them when invalid
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.
This commit is contained in:
parent
a559bf54eb
commit
aac7de208f
6 changed files with 27 additions and 4 deletions
|
@ -296,6 +296,8 @@
|
|||
input[type=email],
|
||||
input[type=password],
|
||||
input[type=number],
|
||||
input[inputmode=numeric],
|
||||
input[inputmode=decimal],
|
||||
input[type=tel] {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
@ -315,6 +317,8 @@
|
|||
&[type='date'],
|
||||
&[type='tel'],
|
||||
&[type='number'],
|
||||
&[inputmode='numeric'],
|
||||
&[inputmode='decimal'],
|
||||
&[type='datetime-local'] {
|
||||
width: 33.33%;
|
||||
}
|
||||
|
|
|
@ -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))
|
||||
|
|
|
@ -1 +1 @@
|
|||
= @form.number_field(:value, input_opts(id: @champ.input_id, aria: { describedby: @champ.describedby_id }, placeholder: 5, required: @champ.required?))
|
||||
= @form.text_field(:value, input_opts(id: @champ.input_id, aria: { describedby: @champ.describedby_id }, pattern: "[0-9]*", inputmode: :numeric, required: @champ.required?))
|
||||
|
|
|
@ -1 +1 @@
|
|||
= @form.number_field(:value, input_opts(id: @champ.input_id, aria: { describedby: @champ.describedby_id }, placeholder: @champ.libelle, required: @champ.required?))
|
||||
= @form.text_field(:value, input_opts(id: @champ.input_id, aria: { describedby: @champ.describedby_id }, placeholder: @champ.libelle, required: @champ.required?, pattern: "[0-9]*", inputmode: :decimal))
|
||||
|
|
|
@ -205,6 +205,8 @@ export class AutosaveController extends ApplicationController {
|
|||
formData.append(input.name, input.value);
|
||||
}
|
||||
} else {
|
||||
// NOTE: some type inputs (like number) have an empty input.value
|
||||
// when the filled value is invalid (not a number) so we avoid them
|
||||
formData.append(input.name, input.value);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -144,7 +144,11 @@ describe 'The user' do
|
|||
end.to change { Champ.count }
|
||||
end
|
||||
|
||||
let(:simple_procedure) { create(:procedure, :published, :for_individual, types_de_champ_public: [{ mandatory: true, libelle: 'texte obligatoire' }, { mandatory: false, libelle: 'texte optionnel' }]) }
|
||||
let(:simple_procedure) {
|
||||
create(:procedure, :published, :for_individual, types_de_champ_public: [
|
||||
{ mandatory: true, libelle: 'texte obligatoire' }, { mandatory: false, libelle: 'texte optionnel' }, { mandatory: false, libelle: "nombre", type: :integer_number }
|
||||
])
|
||||
}
|
||||
|
||||
scenario 'save an incomplete dossier as draft but cannot not submit it', js: true, retry: 3 do
|
||||
log_in(user, simple_procedure)
|
||||
|
@ -170,6 +174,19 @@ describe 'The user' do
|
|||
expect(page).to have_current_path(merci_dossier_path(user_dossier))
|
||||
end
|
||||
|
||||
scenario 'validates invalid number', js: true, retry: 3 do
|
||||
log_in(user, simple_procedure)
|
||||
fill_individual
|
||||
|
||||
# Check an incomplete dossier can be saved as a draft, even when mandatory fields are missing
|
||||
fill_in('nombre', with: 'environ 300')
|
||||
wait_for_autosave
|
||||
|
||||
within ".fr-message--error" do
|
||||
expect(page).to have_content("doit être un nombre entier")
|
||||
end
|
||||
end
|
||||
|
||||
scenario 'extends dossier experation date more than one time, ', js: true, retry: 3 do
|
||||
simple_procedure.update(procedure_expires_when_termine_enabled: true)
|
||||
user_old_dossier = create(:dossier,
|
||||
|
|
Loading…
Reference in a new issue