Fix JavaScript error when character count ID starts with a number #2080
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Exclude hidden examples from the list of examples shown for each component, whilst still making their data available to the review app so that they can be viewed if you know the URL. This allows us to write JavaScript tests (which rely on examples in the review app) that target ‘edge cases’ without having to make the examples ‘visible’ in the review app.
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
Although it’s valid to start an ID with a number, the lack of quotes makes this an invalid CSS selector when interpolated with an ID that starts with a number, and an error is thrown: > DOMException: Failed to execute 'querySelector' on 'Element': '[id=1_more-detail-info]' is not a valid selector. This is because attribute values are either `ident-tokens` or `string-tokens` [1]. Omitting the quotes means that the atrribute value is treated as an ident-token, which may not start with a number [2]. Quoting the value means it’s treated instead as a string-token, which can start with a number [3]. Ideally we’d be using `document.getElementById` to get the count message, but we’ve previously decided that would be a breaking change as it means the lookup is no longer scoped to the $module [4]. [1]: https://www.w3.org/TR/selectors/#attribute-representation [2]: https://www.w3.org/TR/css-syntax-3/#ident-token-diagram [3]: https://www.w3.org/TR/css-syntax-3/#string-token-diagram [4]: #1843 (comment)
36degrees
changed the title
govuk-design-system-ci
temporarily deployed
to
govuk-fronte-character--vmhobi
36degrees
changed the title
govuk-design-system-ci
temporarily deployed
to
govuk-fronte-character--vmhobi
vanitabarrett
approved these changes
Dec 22, 2020
Merged
This was referenced Mar 16, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
As reported in #2058, the call to
querySelectorincharacter-count.jserrors when the id starts with a number:Although it’s valid to start an ID with a number, the lack of quotes makes this an invalid CSS selector when interpolated with an ID that starts with a number, hence the error.
govuk-frontend/src/govuk/components/character-count/character-count.js
Lines 8 to 10 in 9b320ce
This is because attribute values are either
ident-tokensorstring-tokens. Omitting the quotes means that the atrribute value is treated as an ident-token, which may not start with a number.Quoting the value means it’s treated instead as a string-token, which can start with a number.
Ideally we’d be using
document.getElementByIdto get the count message, but we’ve previously decided that would be a breaking change as it means the lookup is no longer scoped to the$module.This also changes the way that we exclude hidden examples from the list of examples shown for each component, so that we still make their data available to the review app so that they can be viewed if you know the URL. This allows us to write JavaScript tests (which rely on examples in the review app) that target ‘edge cases’ without having to make the examples ‘visible’ in the review app.
Closes #2058