material-components / material-components/material-web
Issue with md-menu on Safari
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 was comparing the behaviour from chrome to safari so I think this is a bug. Essentially when you use a mouse and you click, it opens the menu and triggers the focus ring on safari. On chrome it only happens with the keyboard.
https://github.com/user-attachments/assets/0aa16c5b-fccc-4a22-92af-9557c2e80a13
Chrome
https://github.com/user-attachments/assets/b3b6b8dd-ef5d-46d1-b6ef-faf52bae24d5
Safari
Reproduction
Click on the menu to open it.
Workaround
There is really no workaround.
Is this a regression?
No or unsure. This never worked, or I haven't tried before.
Affected versions
2.3.0
Browser/OS/Node environment
Browser: Safari Version 18.5 (20621.2.5.11.8) and Chrome Version 138.0.7204.158
OS Mac OS 15.5
Node Version 24.3.0 (although we're using node 20 with bazel using the rules nodejs)
NPM Version 11.4.2 (using yarn 1.22.19)
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 by reproducing the md-menu behavior described in the issue on Safari and Chrome, using the supplied browser and OS versions. Trace the menu's focus behavior and compare mouse and keyboard activation; done means mouse opening matches Chrome without an unintended focus ring while keyboard focus remains visible.
Written by the indexing model from the issue text.
Assessment
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100