ONSdigital / design-system

ONS Design System
https://service-manual.ons.gov.uk/design-system
MIT License
27 stars 17 forks source link

Potential double error panel on textarea component #3244

Open rmccar opened 6 days ago

rmccar commented 6 days ago

What happened?

There is the potential that we allow a double error panel on the textarea component and one of our tests even uses configuration that would produce this bug. This is that config:

{% from "components/textarea/_macro.njk" import onsTextarea %}

{{
    onsTextarea({
        "id": "textarea-error",
        "name": "feedback",
        "label": {
            "text": "Please provide some feedback",
            "description": "For example, describe any difficulties you experienced in the use of this service"
        },
        "error": {
            "id": "feedback-error",
            "text": "Enter your feedback"
        },
        "dontWrap": true,
        "mutuallyExclusive": {
            "or": 'Or',
            "deselectMessage": 'Selecting this will clear your feedback',
            "deselectGroupAdjective": 'cleared',
            "deselectExclusiveOptionAdjective": 'deselected',
            "exclusiveOptions": [
                {
                    "id": 'feedback-exclusive-option',
                    "name": 'no-feedback',
                    "value": 'no-feedback',
                    "label": {
                        "text": 'I dont want to provide feedback'
                    }
                }
            ]
        }
    })
}}

This is what it renders:

Screenshot 2024-06-27 at 08 11 26

This is caused because there is an extra field being added in the macro with the error param passed.

The call to onsField around the field variable needs to be removed and the test still renders field component testing for that field also needs to be removed. Like here in this commit

What was the expected outcome?

Only one error panel is rendered around the textarea.

How is this problem impacting your service?

N/A

What list of steps can be followed to reproduce the bug or issue?

Example

Above

What version of the ONS Design System are you using?

Latest

What devices are you seeing the problem on?

All

Device details

N/A

What operating systems are you seeing the problem on?

All

Operating system details

N/A

What browsers are you seeing the problem on?

All

Browser details

N/A