[joy-ui] Hover styles persist after clicking on an element on mobile
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce 🕹
Link to live example:
Steps:
- Open https://mui.com/joy-ui/react-button/
- Click on an element that has a
&:hoverstyle
Current behavior 😯
KO, Joy UI
https://user-images.githubusercontent.com/3165635/226317657-b2c01f26-7727-4306-9bfc-4a616d1e1e25.mov
KO, Base UI
https://user-images.githubusercontent.com/3165635/226316275-3ef8f658-87b9-4487-8f54-a6b66e1624d5.mov
Expected behavior 🤔
OK on Material UI, however there is a limit, it's broken on all Samsung phones: https://github.com/mui/material-ui/issues/15000#issuecomment-504754518
https://user-images.githubusercontent.com/3165635/226316269-20557aa8-c234-4680-a038-5b0695d205c1.mov
Context 🔦
https://github.com/mui/material-ui/issues/15000
Your environment 🌎
MUI Core v5.11.13
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 issue from the Joy UI React Button example, then compare the corresponding Base UI behavior with Material UI as shown in the linked videos and context issue. Investigate where the &":hover" styles are applied for clicked elements on mobile browsers; done means the hover style no longer persists after clicking, while documenting the Samsung-phone limitation if it remains.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100