Skip to content

Commit

Permalink
Input component 0 value fix
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.
  • Loading branch information
patrickpatrickpatrick committed May 2, 2024
1 parent f047499 commit 06bd485
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 10 deletions.
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,6 +3,17 @@
{% 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 "" -%}
Expand All @@ -13,15 +24,48 @@
{%- 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 Expand Up @@ -67,7 +111,7 @@

{%- if hasPrefix or hasSuffix or hasBeforeInput or hasAfterInput %}
<div class="govuk-input__wrapper {%- if params.inputWrapper.classes %} {{ params.inputWrapper.classes }}{% endif %}"
{{- govukAttributes(params.inputWrapper.attributes) }}>
{{- govukAttributes(params.inputWrapper.attributes) }}>
{% if hasBeforeInput %}
{{- params.formGroup.beforeInput.html | safe | trim | indent(4, true) if params.formGroup.beforeInput.html else params.formGroup.beforeInput.text }}
{% endif %}
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 06bd485

Please sign in to comment.