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

Character count fails if ID starts with a number. #2058

Closed
josef-vlach opened this issue Dec 7, 2020 · 2 comments · Fixed by #2080
Closed

Character count fails if ID starts with a number. #2058

josef-vlach opened this issue Dec 7, 2020 · 2 comments · Fixed by #2080
Assignees
@36degrees
Labels
🐛 bug Something isn't working the way it should (including incorrect wording in documentation) character count 🕔 hours A well understood issue which we expect to take less than a day to resolve.

Comments

@josef-vlach
Copy link

Description of the issue

When character count is used on a textarea with id which start with a number, it fails with an exception:

all.js:1501 Uncaught DOMException: Failed to execute 'querySelector' on 'Element': '[id=1_details-info]' is not a valid selector.
    at new CharacterCount (http://localhost/submissions/assets/lib/govuk-frontend/govuk/all.js:1501:34)
    at http://localhost/submissions/assets/lib/govuk-frontend/govuk/all.js:2515:5
    at NodeList.forEach (<anonymous>)
    at nodeListForEach (http://localhost/submissions/assets/lib/govuk-frontend/govuk/all.js:14:18)
    at Object.initAll (http://localhost/submissions/assets/lib/govuk-frontend/govuk/all.js:2514:3)
    at http://localhost/submissions/form/test/page?se=t&ff=t:1012:34

Steps to reproduce the issue

Having a textarea with id which start with a number:

<textarea
    class="govuk-textarea govuk-js-character-count govuk-input--width-30"
    id="1_details"
    name="1_details"
    rows="5"
    aria-describedby="1_details-info"></textarea>

Current behaviour

querySelector in character-count.js crashes when id starts with a number:

govuk-frontend/src/govuk/components/character-count/character-count.js

Lines 8 to 10 in 9b320ce

if (this.$textarea) {
this.$countMessage = $module.querySelector('[id=' + this.$textarea.id + '-info]')
}

(This is a minimal reproduction of the issue)

> document.querySelector('[id=1_details-info]');
VM711:1 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '[id=1_details-info]' is not a valid selector.
    at <anonymous>:1:10

The reason for the crash is that id selector is not being quoted.

Expected behaviour

querySelector works when id starts with a number:

> document.querySelector('[id="1_details-info"]');
<div id=​"1_details-info" class=​"govuk-hint govuk-character-count__message" aria-live=​"polite">
  You can enter up to 1000 characters
​</div>

It works when id selector is quoted: id="1_details-info".
@josef-vlach josef-vlach added awaiting triage Needs triaging by team 🐛 bug Something isn't working the way it should (including incorrect wording in documentation) labels Dec 7, 2020
@trang-erskine trang-erskine added the 🕔 hours A well understood issue which we expect to take less than a day to resolve. label Dec 7, 2020
@trang-erskine trang-erskine removed the awaiting triage Needs triaging by team label Dec 7, 2020
@36degrees 36degrees self-assigned this Dec 18, 2020
36degrees added a commit that referenced this issue Dec 18, 2020
@36degrees
Add failing test
ac7a5fe 
This test fails with:

```
Character count › when JavaScript is available › when counting characters › when the ID starts with a number › still works correctly

    DOMException: Failed to execute 'querySelector' on 'Element': '[id=1_more-detail-info]' is not a valid selector.
```

which matches the console error reported in the issue [1]

[1]: #2058
@36degrees 36degrees mentioned this issue Dec 18, 2020
Merged
@SandipKhedekar
Copy link

As the above issue has been fixed long back. May we please know when it will be released?

@36degrees
Copy link
Contributor

@SandipKhedekar this was fixed in v3.11.0 which has just been released this afternoon.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@36degrees 36degrees

Labels
🐛 bug Something isn't working the way it should (including incorrect wording in documentation) character count 🕔 hours A well understood issue which we expect to take less than a day to resolve.
Projects
GOV.UK Design System cycle board
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix JavaScript error when character count ID starts with a number alphagov/govuk-frontend
4 participants
@36degrees @SandipKhedekar @josef-vlach @trang-erskine