Use inputmode="numeric" for results entry

ynr/apps/uk_results/forms.py

@@ -10,6 +10,7 @@
 from candidates.views.version_data import get_client_ip
 from uk_results.helpers import RecordBallotResultsHelper
 from utils.db import LastWord, NullIfBlank
+from utils.widgets import DCNumberInput
 
 from .models import CandidateResult, ResultSet
 
@@ -32,7 +33,11 @@ class Meta:
                     "rows": 1,
                     "columns": 72,
                 }
-            )
+            ),
+            "num_turnout_reported": DCNumberInput(),
+            "turnout_percentage": DCNumberInput(),
+            "num_spoilt_ballots": DCNumberInput(),
+            "total_electorate": DCNumberInput(),
         }
 
     def __init__(self, ballot, *args, **kwargs):
@@ -76,6 +81,7 @@ def __init__(self, ballot, *args, **kwargs):
                 label=membership.name_and_party,
                 initial=initial.get("num_ballots"),
                 required=True,
+                widget=DCNumberInput,
             )
             fields[f"tied_vote_{name}"] = forms.BooleanField(
                 required=False,

ynr/apps/uk_results/tests/test_smoke_test_views.py

@@ -49,6 +49,8 @@ def test_form_view_creates_result(self):
         )
         resp = self.app.get(url, user=self.user_who_can_record_results)
         self.assertEqual(resp.status_code, 200)
+        self.assertContains(resp, 'inputmode="numeric"')
+        self.assertContains(resp, r'pattern="[0-9\s\.]*"')
         form = resp.forms[1]
         form["memberships_13"] = 1000
         form["memberships_14"] = 2000

ynr/apps/utils/widgets.py

@@ -1,7 +1,7 @@
 """
 For storing custom Django form widgets
 """
-from django.forms.widgets import Select
+from django.forms.widgets import Select, TextInput
 
 
 class SelectWithAttrs(Select):
@@ -26,3 +26,25 @@ def create_option(
         )
         option["attrs"].update(label)
         return option
+
+
+class DCNumberInput(TextInput):
+    """
+    An input widget for entering numbers that isn't an input `type=number`.
+
+    For more on why we do this, see this GDS post:
+
+    https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/
+
+    """
+
+    def build_attrs(self, base_attrs, extra_attrs=None):
+        attrs = super().build_attrs(base_attrs, extra_attrs)
+        attrs.update(
+            {
+                "inputmode": "numeric",
+                "pattern": r"[0-9\s\.]*",
+                "oninvalid": "this.setCustomValidity('Enter a number')",
+            }
+        )
+        return attrs