Closed bujowskis closed 10 months ago
DiegoAndai
commented
1 year ago Hey @bujowskis, thanks for the report!
I'm not able to reproduce this on a Mac machine.
Buttons have a pulsating ripple effect when they're focused. It might be that after the click and until the snapshot is taken, the button is focused. Can you help me confirm this theory?
bujowskis
commented
12 months ago Hi @DiegoAndai , I think this may be windows-specific.
The button is not playing the animation when the screenshot is taken (so I guess it shouldn't be in the focused position?)
Basically what happens is that after taking a screenshot using the aforementioned tool (Windows Snip and Sketch), the last clicked button starts playing the animation indefinitely, until something is clicked.
My guess is that maybe, somehow, the tool forces the most recently clicked button to go into the focused state (or resets it's animation) and keeps it like that permanently until the next click.
DiegoAndai
commented
12 months ago My guess is that maybe, somehow, the tool forces the most recently clicked button to go into the focused state (or resets it's animation) and keeps it like that permanently until the next click.
Yeah, that was what I was thinking as well. If that's the case, I don't think there's much to do on our side.
Duplicates
Latest version
Steps to reproduce 🕹
Link to live example: works even on the Button's documentation page - https://mui.com/material-ui/react-button/, basic button to be exact - https://mui.com/material-ui/react-button/#basic-button
Note that for taking the screenshot I'm using Windows Snip & Sketch tool on Win10.
I'm running the dev environment (
npm run dev) on a WSL.Steps:
Win+Shift+S) - click anywhere, it doesn't need to be a meaningful screenshotCurrent behavior 😯
after the screenshot is taken, the last Button that was clicked before taking the screenshot plays the "clicked" animation and keeps playing this animation until anything else is clicked - see the attached screenshots, works for all three variants:
Expected behavior 🤔
the buttons should not play the "clicked" animation and be stuck playing it after taking the screenshot
Context 🔦
I was reviewing a PR on our website navbar component, clicked on a button and proceeded to take a screenshot to attach it in the PR comment - but then I saw this weird behavior of the button I clicked (stuck playing this "clicked" animation despite no click)
I think it's a rare case that would be hard to spot in testing, I just happened to stumble upon it by accident. So far it doesn't seem to be something critical, breaking the functionality, but it's unexpected and confusing behavior that I needed to additionally investigate. I didn't know if it's us doing something wrong, or an issue in the MUI itself. Turned out it's MUI.
So it affects
Your environment 🌎
``` System: OS: Linux 5.10 Ubuntu 20.04.4 LTS (Focal Fossa) Binaries: Node: 20.2.0 - ~/.nvm/versions/node/v20.2.0/bin/node Yarn: 1.22.19 - ~/.yarn/bin/yarn npm: 9.6.6 - ~/.nvm/versions/node/v20.2.0/bin/npm Browsers: Chrome: Not Found npmPackages: @mui/base: 5.0.0-beta.13 @mui/core-downloads-tracker: 5.14.7 @mui/icons-material: ^5.14.9 => 5.14.9 @mui/material: ^5.14.7 => 5.14.7 @mui/private-theming: 5.14.7 @mui/styled-engine: 5.14.7 @mui/styled-engine-sc: ^5.14.7 => 5.14.7 @mui/system: 5.14.7 @mui/types: 7.2.4 @mui/utils: 5.14.7 @types/react: ^18.2.15 => 18.2.21 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 styled-components: ^5.3.1 => 5.3.11 typescript: 5.0.2 => 5.0.2 ```npx @mui/envinfoI used Chrome Version 117.0.5938.89 (Official Build) (64-bit)