Fix input value not being set if the value was '0'

CHANGELOG.md

@@ -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)
 

packages/govuk-frontend/src/govuk/components/input/input.yaml

@@ -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:

packages/govuk-frontend/src/govuk/components/input/template.njk

@@ -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 -%}
 

packages/govuk-frontend/src/govuk/components/input/template.test.js

@@ -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'])