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.

app/assets/stylesheets/forms.scss

@@ -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%;
           }

app/components/editable_champ/decimal_number_component/decimal_number_component.html.haml

@@ -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))

app/components/editable_champ/integer_number_component/integer_number_component.html.haml

@@ -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?))

app/components/editable_champ/number_component/number_component.html.haml

@@ -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))

app/javascript/controllers/autosave_controller.ts

@@ -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);
       }
     }

spec/system/users/brouillon_spec.rb

@@ -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,