Fix numeric inputs not submitting values if non digits are submitted …

…in Firefox and Safari (#268)

src/components/input/_template.njk

@@ -2,8 +2,11 @@
 {% from "components/label/_macro.njk" import onsLabel %}
 
 {% if params.type == "number" %}
-    {% set type = "number" %}
+{# Type must be "text" or Firefox and Safari will set a blank value to the server if non numeric characters are entered - 
+   they don't block non numeric characters: https://bugzilla.mozilla.org/show_bug.cgi?id=1398528 #}
+    {% set type = "text" %}
     {% set pattern = "[0-9]*" %}
+    {% set inputmode = "numeric" %}
 {% elif params.type %}
     {% set type = params.type %}
 {% else %}
@@ -49,9 +52,10 @@
         {% if params.accept !== undefined %}accept="{{ params.accept }}"{% endif %}
         {% if params.min !== undefined %}min="{{ params.min }}"{% endif %}
         {% if params.max !== undefined %}max="{{ params.max }}"{% endif %}
+        {% if pattern !== undefined %}pattern="{{ pattern }}"{% endif %}
+        {% if inputmode != undefined %}inputmode="{{ inputmode }}"{% endif %}
         {% if params.autocomplete !== undefined %}autocomplete="{{ params.autocomplete }}"{% endif %}
         {% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
-
     />
     {% if params.prefix !== undefined or params.suffix !== undefined %}
             <abbr class="input-type__type" aria-hidden="true" title="{{ params.prefix.title }}{{ params.suffix.title }}">{{ params.prefix.text or params.prefix.title }}{{ params.suffix.text or params.suffix.title }}</abbr>

src/components/input/examples/number/index.njk

@@ -4,8 +4,7 @@
         "id": "number",
         "type": "number",
         "attributes": {
-            "min": 0,
-            "required": true
+            "min": 0
         },
         "label": {
             "text": "Enter a number"