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

Add "None of these" and "or" divider to checkboxes #2151

Merged
merged 5 commits into from
Jun 18, 2021
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add data attribute to HTML for behaviour, and always insert data-modu…
…le attribute.

This fixes a bug/edge-case where if you use two separate calls to the macro within the same `<form>` and specify the same `name` attribute value for both sets of checkboxes, but only one of them has the `exclusive` behaviour or the conditional content, then checking a checkbox in one list would not uncheck the "None" checkbox in the other list, as there was no `eventListener` set up.

Always initialising the javascript for every set of checkboxes solves this.

This does introduce a small performance penalty of potentially initialising javascript when it's not needed, but this should be negligible and non-blocking.
  • Loading branch information
frankieroberto committed Jun 18, 2021
commit 7e746b4670e10349a3e678f4bbd6e7d85e8b771d
10 changes: 2 additions & 8 deletions src/govuk/components/checkboxes/template.njk
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,6 @@
{% set describedBy = params.fieldset.describedBy %}
{% endif %}

{% set isConditional = false %}
{% for item in params.items %}
{% if item.conditional.html %}
{% set isConditional = true %}
{% endif %}
{% endfor %}

{#- fieldset is false by default -#}
{% set hasFieldset = true if params.fieldset else false %}

Expand Down Expand Up @@ -51,7 +44,7 @@
{% endif %}
<div class="govuk-checkboxes {%- if params.classes %} {{ params.classes }}{% endif %}"
{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
{%- if isConditional %} data-module="govuk-checkboxes"{% endif -%}>
data-module="govuk-checkboxes">
{% for item in params.items %}
{% if item %}
{#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
Expand Down Expand Up @@ -79,6 +72,7 @@
{{-" checked" if item.checked }}
{{-" disabled" if item.disabled }}
{%- if item.conditional.html %} data-aria-controls="{{ conditionalId }}"{% endif -%}
{%- if item.behaviour %} data-behaviour="{{ item.behaviour }}"{% endif -%}
{%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
{{ govukLabel({
Expand Down