Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
May 9, 2024

Conversation

patrickpatrickpatrick
Copy link
Contributor

@patrickpatrickpatrick patrickpatrickpatrick commented May 2, 2024

What

Input component now uses the govukAttributes macro to validate and format attributes. Test and example added for edge-case outlined in issue #4669.

Why

Issue #4669 outlines a case where setting 'value' of the Input component to 0 (integer) would not set the value of the input component. This is because the template logic would see '0' as false-y and so not set the value attribute. The govukAttributes takes this case into account and so using it means that this no longer occurs.

This is based from #4770. It adds tests and the input wrapper classes and attributes back.

Copy link

github-actions bot commented May 2, 2024

📋 Stats

File sizes

File Size
dist/govuk-frontend-development.min.css 113.32 KiB
dist/govuk-frontend-development.min.js 42.21 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js 87.21 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs 81.95 KiB
packages/govuk-frontend/dist/govuk/all.mjs 4.17 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs 359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css 113.3 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js 42.2 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs 5.55 KiB

Modules

File Size (bundled) Size (minified)
all.mjs 77.67 KiB 40.19 KiB
accordion.mjs 22.71 KiB 12.85 KiB
button.mjs 5.98 KiB 2.69 KiB
character-count.mjs 22.4 KiB 9.92 KiB
checkboxes.mjs 5.83 KiB 2.83 KiB
error-summary.mjs 7.89 KiB 3.46 KiB
exit-this-page.mjs 17.1 KiB 9.26 KiB
header.mjs 4.46 KiB 2.6 KiB
notification-banner.mjs 6.26 KiB 2.62 KiB
password-input.mjs 15.15 KiB 7.25 KiB
radios.mjs 4.83 KiB 2.38 KiB
skip-link.mjs 4.39 KiB 2.18 KiB
tabs.mjs 10.13 KiB 6.11 KiB

View stats and visualisations on the review app


Action run for 913b771

This comment was marked as outdated.

Copy link
Contributor

@36degrees 36degrees left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for picking this up and congrats on your first contribution to GOV.UK Frontend on the team 😎 🎉

There's a couple of things that aren't quite right at the minute – in particular it looks like the changes in #4770 might have been out of date with some other changes to add the autocapitalize attribute, sorry we'd missed that!

Let me know if it'd be helpful to chat through any of this or if you've got any questions!

optional: true
},
autocomplete: {
value: params.autocomplete | default("none", true)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like this has changed from #4770 and changes the behaviour slightly.

Previously, if params.autocomplete wasn't set, we wouldn't output an autocomplete attribute.

Now, if params.autocomplete isn't set, we output a default autocomplete="none" which isn't valid.

This is one of the reasons the tests are failing – we run an html validator against all of the examples and it's erroring with '"none" is not a valid autocomplete token or field name'.

{%- 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 %}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue It looks like the autocapitalize attribute was added in #4442, after the work in #4770 was done, so this will need adding to the new govukAttributes call.

(There's a corresponding test for this which we need to keep too)

@@ -455,22 +446,4 @@ describe('Input', () => {
expect($prefixBeforeSuffix.length).toBeTruthy()
})
})

describe('when it includes the input wrapper', () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue Why have these tests been removed?

name: with-zero-value
label:
text: With zero value
value: !!int 0
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question Is the casting definitely necessary here? My understanding was that YAML should treat this is an integer already.

@@ -71,6 +71,13 @@ describe('Input', () => {
expect($component.val()).toBe('QQ 12 34 56 C')
})

it('renders with zero value', () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

praise Thanks for adding a test for this 🙌🏻

@patrickpatrickpatrick patrickpatrickpatrick marked this pull request as ready for review May 2, 2024 15:45
Copy link
Contributor

@36degrees 36degrees left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is looking great, thanks for addressing those comments.

One last thing – we'll want to add a changelog entry so that users know we've fixed this.

For a change like this we'd usually list it under 'Fixes', and just use the PR title, crediting anyone involved or reporting or fixing it as appropriate.

It might be worth making the PR title slightly more descriptive so we end up with something like this:

### Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

<!-- Existing fixes already in the changelog -->
- [#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 for reporting this issue

@patrickpatrickpatrick patrickpatrickpatrick changed the title Input component 0 value fix Fix input value not being set if the value was '0' May 7, 2024
Copy link
Contributor

@36degrees 36degrees left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me! 🙌🏻

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 <work@colinr.com>
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4963 May 9, 2024 12:27 Inactive
@patrickpatrickpatrick patrickpatrickpatrick merged commit c24411b into main May 9, 2024
48 checks passed
@patrickpatrickpatrick patrickpatrickpatrick deleted the fix-zero-input branch May 9, 2024 12:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants