Update date input to use type=text and 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', () => {