Merge pull request #1704 from alphagov/date-input-type-text-inputmode…

…-numeric

Update date input to type=text, inputmode=numeric

CHANGELOG.md

@@ -12,6 +12,7 @@ If you're using Nunjucks, you can now add classes to the character count compone
 
 ### Fixes
 
+- [Pull request #1704: Update the date input component to use `input type=text inputmode=numeric`](https://github.com/alphagov/govuk-frontend/pull/1704)
 - [Pull request #1690: Don't unneccesarily self-close tags](https://github.com/alphagov/govuk-frontend/pull/1690)
 - [Pull request #1678: Fix tabs component throwing JavaScript errors in Internet Explorer 8](https://github.com/alphagov/govuk-frontend/pull/1678).
 - [Pull request #1676: Fix skip link component focus style with global styles enabled](https://github.com/alphagov/govuk-frontend/pull/1676).

src/govuk/components/date-input/template.njk

@@ -65,7 +65,8 @@
         classes: "govuk-date-input__input " + (item.classes if item.classes),
         name: (params.namePrefix + "-" + item.name) if params.namePrefix else item.name,
         value: item.value,
-        type: "number",
+        type: "text",
+        inputmode: "numeric",
         autocomplete: item.autocomplete,
         pattern: item.pattern if item.pattern else "[0-9]*",
         attributes: item.attributes

src/govuk/components/date-input/template.test.js

@@ -140,7 +140,7 @@ describe('Date input', () => {
       expect($firstItems.text().trim()).toEqual('Day')
     })
 
-    it('renders inputs with type="number"', () => {
+    it('renders inputs with type="text"', () => {
       const $ = render('date-input', {
         items: [
           {
@@ -150,7 +150,20 @@ describe('Date input', () => {
       })
 
       const $firstInput = $('.govuk-date-input__item:first-child input')
-      expect($firstInput.attr('type')).toEqual('number')
+      expect($firstInput.attr('type')).toEqual('text')
+    })
+
+    it('renders inputs with inputmode="numeric"', () => {
+      const $ = render('date-input', {
+        items: [
+          {
+            name: 'day'
+          }
+        ]
+      })
+
+      const $firstInput = $('.govuk-date-input__item:first-child input')
+      expect($firstInput.attr('inputmode')).toEqual('numeric')
     })
 
     it('renders inputs with pattern="[0-9]*" to trigger numeric keypad on iOS', () => {