Skip to content

Commit

Permalink
Fix input value not being set if the value was '0'
Browse files Browse the repository at this point in the history
Fixes #4669. Input component now uses govukAttributes macro to validate
and format attributes. Test and example added for edge case outlined in
issue #4669.

Co-authored-by: Colin Rotherham <[email protected]>
  • Loading branch information
patrickpatrickpatrick and colinrotherham committed May 9, 2024
1 parent 281e39a commit 913b771
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 10 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ We've made fixes to GOV.UK Frontend in the following pull requests:

- [#4942: Remove duplicate `errorMessage` argument for the password input component](https://github.com/alphagov/govuk-frontend/pull/4942) - thanks to [Tim South](https://github.com/tim-s-ccs) for contributing this change
- [#4961: Fix tree-shaking when importing `govuk-frontend`](https://github.com/alphagov/govuk-frontend/pull/4961)
- [#4963: Fix input value not being set if the value was '0'](https://github.com/alphagov/govuk-frontend/pull/4963) – thanks to [@dwp-dmitri-algazin](https://github.com/dwp-dmitri-algazin) for reporting this issue

## 5.3.1 (Fix release)

Expand Down
8 changes: 8 additions & 0 deletions packages/govuk-frontend/src/govuk/components/input/input.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -399,6 +399,14 @@ examples:
label:
text: With value
value: QQ 12 34 56 C
- name: zero value
hidden: true
options:
id: with-zero-value
name: with-zero-value
label:
text: With zero value
value: 0
- name: with describedBy
hidden: true
options:
Expand Down
64 changes: 54 additions & 10 deletions packages/govuk-frontend/src/govuk/components/input/template.njk
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,69 @@
{% from "../hint/macro.njk" import govukHint %}
{% from "../label/macro.njk" import govukLabel %}

{#- Set classes for this component #}
{%- set classNames = "govuk-input" -%}

{%- if params.classes %}
{% set classNames = classNames + " " + params.classes %}
{% endif %}

{%- if params.errorMessage %}
{% set classNames = classNames + " govuk-input--error" %}
{% endif %}

{#- a record of other elements that we need to associate with the input using
aria-describedby – for example hints or error messages -#}
{% set describedBy = params.describedBy if params.describedBy else "" -%}
{% set describedBy = params.describedBy if params.describedBy else undefined -%}

{%- set hasPrefix = true if params.prefix and (params.prefix.text or params.prefix.html) else false %}
{%- set hasSuffix = true if params.suffix and (params.suffix.text or params.suffix.html) else false %}
{%- set hasBeforeInput = true if params.formGroup.beforeInput and (params.formGroup.beforeInput.text or params.formGroup.beforeInput.html) else false %}
{%- set hasAfterInput = true if params.formGroup.afterInput and (params.formGroup.afterInput.text or params.formGroup.afterInput.html) else false %}

{%- macro _inputElement(params) -%}
<input class="govuk-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default("text", true) }}"
{%- if (params.spellcheck === false) or (params.spellcheck === true) %} spellcheck="{{ params.spellcheck }}"{% endif %}
{%- if params.value %} value="{{ params.value }}"{% endif %}
{%- if params.disabled %} disabled{% endif %}
{%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
{%- if params.autocomplete %} autocomplete="{{ params.autocomplete }}"{% endif %}
{%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
{%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
{%- if params.autocapitalize %} autocapitalize="{{ params.autocapitalize }}"{% endif %}
<input
{{- govukAttributes({
class: classNames,
id: params.id,
name: params.name,
type: params.type | default("text", true),
spellcheck: {
value: params.spellcheck | string
if [true, false].includes(params.spellcheck)
else false,
optional: true
},
value: {
value: params.value,
optional: true
},
disabled: {
value: params.disabled,
optional: true
},
"aria-describedby": {
value: describedBy,
optional: true
},
autocomplete: {
value: params.autocomplete,
optional: true
},
autocapitalize: {
value: params.autocapitalize,
optional: true
},
pattern: {
value: params.pattern,
optional: true
},
inputmode: {
value: params.inputmode,
optional: true
}
}) -}}

{{- govukAttributes(params.attributes) }}>
{%- endmacro -%}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,13 @@ describe('Input', () => {
expect($component.val()).toBe('QQ 12 34 56 C')
})

it('renders with zero value', () => {
const $ = render('input', examples['zero value'])

const $component = $('.govuk-input')
expect($component.val()).toBe('0')
})

it('renders with aria-describedby', () => {
const $ = render('input', examples['with describedBy'])

Expand Down

0 comments on commit 913b771

Please sign in to comment.