[ListItemSecondaryAction] visibility on hover does not work
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
ListItemSecondaryAction visibility does not change from hidden to visible on hover when implemented using CSS.
Other CSS rules like background color work perfectly fine and change on hover. But visibility does not switch from hidden to visible.
In case of switching from visible to hidden on hover, the ListItemSecondaryAction blinks on hover.
Expected behavior 🤔
ListItemSecondaryAction should be able to be hidden by default, then visible on hover. Or visible by default and hidden on hover.
Steps to reproduce 🕹
Here is a CodeSandbox that showcases this bug.
https://codesandbox.io/s/styledcustomization-material-demo-forked-wbnku?file=/demo.tsx
Context 🔦
A similar bug was reported in 2018, https://github.com/mui-org/material-ui/issues/10285. We used the suggested solution in our app and were happy with it. But the recent upgrade to V5 brought back this bug.
Your environment 🌎
`npx @mui/envinfo`
I used Chrome Version 96.0.4664.55 (Official Build) (x86_64) on macOS 11.6.1.
I reproduced the issue in the CodeSandbox successfully and have shared the link above.
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 running the linked CodeSandbox and inspecting demo.tsx, which reproduces the ListItemSecondaryAction hover behavior. Compare the visibility and background-color rules, then trace the component's rendered styles in the Material UI source. Done means visibility reliably changes in both hover directions without blinking, with regression coverage added if the relevant test location is identified.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100