fix: align with guidance on input type for numbers (NumberField)

runner/src/server/plugins/engine/components/NumberField.ts

@@ -71,7 +71,8 @@ export class NumberField extends FormComponent {
     const viewModelSuffix = { suffix: { text: suffix } };
     const viewModel = {
       ...super.getViewModel(formData, errors),
-      type: "number",
+      type: "text",
+      inputmode: "numeric",
       // ...False returns nothing, so only adds content when
       // the given options are present.
       ...(options.prefix && viewModelPrefix),
@@ -80,6 +81,11 @@ export class NumberField extends FormComponent {
 
     if (this.schemaOptions.precision) {
       viewModel.attributes.step = "0." + "1".padStart(schema.precision, "0");
+
+      // the `step` attribute will not work with input type "text"
+      // only set to "number" if we need to support existing `precision` config
+      // https://design-system.service.gov.uk/components/text-input/#avoid-using-inputs-with-a-type-of-number
+      viewModel.type = "number";
     }
 
     return viewModel;

runner/test/cases/server/plugins/engine/datepartsfield.test.ts

@@ -86,7 +86,11 @@ function dateComponent(name, width) {
     name: `myComponent__${name.toLowerCase()}`,
     value: undefined,
     classes: `govuk-input--width-${width}`,
-    type: "number",
+
+    // note that the DatePartsField creates NumberFields which are mapped to `items` and passed to the
+    // govukdateinput macro, the type and inputmode are therefore not used
+    type: "text",
+    inputmode: "numeric",
     attributes: {},
   };
 }

runner/test/cases/server/plugins/engine/datetimepartsfield.test.ts

@@ -66,7 +66,11 @@ function dateComponent(name, width) {
     name: `myComponent__${name.toLowerCase()}`,
     value: undefined,
     classes: `govuk-input--width-${width}`,
-    type: "number",
+
+    // note that the DateTimePartsField creates NumberFields which are mapped to `items` and passed to the
+    // govukdateinput macro, the type and inputmode are therefore not used
+    type: "text",
+    inputmode: "numeric",
     attributes: {},
   };
 }

runner/test/cases/server/plugins/engine/numberField.test.ts

@@ -59,4 +59,28 @@ test("Prefix and suffix are passed to view model", () => {
     prefix: { text: "@£%" },
     suffix: { text: "&^%%" },
   });
+
+  test("Text type and numeric inputmode are used by default", () => {
+    const numberFieldPrefixSuffix = new NumberField(baseDef);
+
+    expect(numberFieldPrefixSuffix.getViewModel({})).to.contain({
+      type: "text",
+      inputmode: "numeric",
+    });
+  });
+
+  test("Number type is used is precision is specified", () => {
+    const def = {
+      ...baseDef,
+      schema: { precision: "0" },
+    };
+    const numberFieldPrefixSuffix = new NumberField(def);
+
+    expect(numberFieldPrefixSuffix.getViewModel({})).to.contain({
+      type: "number",
+      attributes: {
+        step: "0.1",
+      },
+    });
+  });
 });