material-components / material-components/material-web
anchor of md-menu doesn't support id that starts with digits
Nobody has claimed this yet.
- Dominant language
- SCSS
- Stars
- 11.3k
- Forks
- 1.1k
- Avg merge
- 20h 28m
- Merged PRs (30d)
- 13
Description
What is affected?
Component
Description
I think in this line
https://github.com/material-components/material-web/blob/main/menu/internal/menu.ts#L329-L330
could use querySelector(`#${CSS.escape(this.anchor)}`) or document.getElementById(this.anchor) so that id starts with digits would cause no issue.
Reproduction
when anchor id is set to 1, it gives error Uncaught (in promise) DOMException: Failed to execute 'querySelector' on 'Document': '#1' is not a valid selector.
playground
Workaround
Use an id that doesn't start with digits
Is this a regression?
No or unsure. This never worked, or I haven't tried before.
Affected versions
1.0.1
Browser/OS/Node environment
Browser: Chrome 119
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in menu/internal/menu.ts at lines 329-330, where the anchor element is looked up. Reproduce the issue with an anchor id of 1 and verify the lookup no longer throws a selector DOMException. Done means an md-menu can resolve a digit-starting anchor id and operate normally.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 35/100