diff --git a/CHANGELOG.md b/CHANGELOG.md index fa33f6d099..60e780c488 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,14 @@ If you're not using the Nunjucks macros, remove the `aria-live` attribute from t This change was introduced in [pull request #2577: Refactor character count to inject new element](https://github.com/alphagov/govuk-frontend/pull/2577) +#### Remove `pattern` from the date input component + +If you're not using the Nunjucks macros, remove `pattern="[0-9]*"` from each of the date input component's elements. + +This attribute was originally added to enforce numeric keyboard functionality in Safari on iOS. The `inputmode` attribute provides this functionality for newer Safari versions, so we no longer need to use the `pattern` attribute. + +This change was introduced in [pull request #2599: Remove pattern attribute from date input component](https://github.com/alphagov/govuk-frontend/pull/2599). + ### Fixes We've made the following fixes in [pull request #2577: Refactor character count to inject new element](https://github.com/alphagov/govuk-frontend/pull/2577): diff --git a/src/govuk/components/date-input/template.njk b/src/govuk/components/date-input/template.njk index c2896756c7..2bca8bf079 100644 --- a/src/govuk/components/date-input/template.njk +++ b/src/govuk/components/date-input/template.njk @@ -68,7 +68,7 @@ type: "text", inputmode: item.inputmode if item.inputmode else "numeric", autocomplete: item.autocomplete, - pattern: item.pattern if item.pattern else "[0-9]*", + pattern: item.pattern, attributes: item.attributes }) | indent(6) | trim }} diff --git a/src/govuk/components/date-input/template.test.js b/src/govuk/components/date-input/template.test.js index 3d14c6cbab..c53fc7bf6a 100644 --- a/src/govuk/components/date-input/template.test.js +++ b/src/govuk/components/date-input/template.test.js @@ -56,13 +56,6 @@ describe('Date input', () => { expect($firstInput.attr('inputmode')).toEqual('numeric') }) - it('renders inputs with pattern="[0-9]*" to trigger numeric keypad on iOS', () => { - const $ = render('date-input', examples.default) - - const $firstInput = $('.govuk-date-input__item:first-child input') - expect($firstInput.attr('pattern')).toEqual('[0-9]*') - }) - it('renders item with implicit class for label', () => { const $ = render('date-input', examples.default)