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.

Sign up for GitHub

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

Jump to bottom

Allow selecting options by passing current values #2616

Merged
merged 3 commits into from
Jun 20, 2022
Merged

Allow selecting options by passing current values #2616

merged 3 commits into from
Jun 20, 2022

Commits on May 26, 2022

  1. Allow selecting options by passing current values 

    At the minute the only way to pre-select or check specific items when using the Nunjucks macros for these components is to pass a boolean flag for each item, which then maps directly to the checked / selected HTML attribute for the <input> / <option>.

This means the user has to do the work to map the previous form data back to a boolean, resulting in code that might look something like this:

```
{{ govukSelect({
    id: "sort",
    name: "sort",
    label: {
        text: "Sort by"
    },
    items: [
        {
            value: "published",
            text: "Recently published",
            selected: (data['sort'] == "published")
        },
        {
            value: "updated",
            text: "Recently updated",
            selected: (data['sort'] == "updated")
        },
        {
            value: "views",
            text: "Most views",
            selected: (data['sort'] == "views")
        },
        {
            value: "comments",
            text: "Most comments",
            selected: (data['sort'] == "comments")
        }
    ]
}) }}
```

This is prone to introducing errors (especially when prototyping) – for example, any changes to the name of the field or the value of the item also need corresponding changes made to the boolean logic, potentially in multiple places.

Allow the user to pass the current value (or array of values, for checkboxes), and using that to work out which item(s) should be checked or selected.

The above example can then be done like this:

```
{{ govukSelect({
    id: "sort",
    name: "sort",
    label: {
        text: "Sort by"
    },
    items: [
        {
            value: "published",
            text: "Recently published"
        },
        {
            value: "updated",
            text: "Recently updated"
        },
        {
            value: "views",
            text: "Most views"
        },
        {
            value: "comments",
            text: "Most comments"
        }
    ],
    value: data[‘sort’]
}) }}
```
    @36degrees
    36degrees committed May 26, 2022
    Configuration menu
    Copy the full SHA
    25ee166 View commit details
    Browse the repository at this point in the history

  2. Document in CHANGELOG 

    Co-authored-by: EoinShaughnessy <72507742+EoinShaughnessy@users.noreply.github.com>
    @36degrees @EoinShaughnessy
    36degrees and EoinShaughnessy committed May 26, 2022
    Configuration menu
    Copy the full SHA
    76cc8b3 View commit details
    Browse the repository at this point in the history

  3. Allow items to override checked state from values 

    If a checkbox, radio or select option has the checked or selected option set, always use its value to set the checked or selected state, even when it’s falsey.

As suggested by @edwardhorsford [1]:

> This is helpful when most of the items just need to check if the stored value equals the value, but one or two need more complex logic to determine if they should be selected.

[1]: #2616 (review)
    @36degrees
    36degrees committed May 26, 2022
    Configuration menu
    Copy the full SHA
    f321a1c View commit details
    Browse the repository at this point in the history