question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[ButtonBase] Right clicking stack up ripples

See original GitHub issue
  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When I right click a component that has the typical material design click behavior, the color of this reaction adds up. So when the tinting is grey the component gets black. When the tinting is white it gets completely white.

Expected Behavior 🤔

When I right click it, the tint can stay as long as the context menu is open. But then it should go away slowly. Or when clicked after a right click, it does not “add up”.

https://user-images.githubusercontent.com/41862965/108120899-3f10a380-70a2-11eb-8a14-aa075f510a14.mov

Steps to Reproduce 🕹

Steps:

  1. https://codesandbox.io/s/issue-c54tu

Context 🔦

No problem but it is a strange behavior.

Your Environment 🌎

Safari and Chrome.

"@material-ui/core": "^4.11.3",
"@material-ui/icons": "^4.11.2",
`npx @material-ui/envinfo`

System: OS: macOS 11.2.1 CPU: (8) x64 Intel® Core™ i5-8257U CPU @ 1.40GHz Memory: 107.60 MB / 8.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 14.15.4 - /usr/local/bin/node npm: 7.5.4 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.10.1 - /usr/local/bin/pod Homebrew: 3.0.0 - /usr/local/bin/brew pip3: 21.0.1 - /usr/local/bin/pip3 RubyGems: 3.0.3 - /usr/bin/gem Utilities: Make: 3.81 - /usr/bin/make GCC: 4.2.1 - /usr/bin/gcc Git: 2.24.3 - /usr/bin/git Clang: 1200.0.32.2 - /usr/bin/clang Servers: Apache: 2.4.46 - /usr/sbin/apachectl SDKs: iOS SDK: Platforms: iOS 14.0, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0 IDEs: Nano: 2.0.6 - /usr/bin/nano Vim: 8.2 - /usr/bin/vim Xcode: 12.0.1/12A7300 - /usr/bin/xcodebuild Languages: Bash: 3.2.57 - /bin/bash Perl: 5.28.2 - /usr/bin/perl PHP: 7.3.24 - /usr/bin/php Python: 2.7.16 - /usr/bin/python Python3: 3.9.1 - /usr/local/bin/python3 Ruby: 2.6.3 - /usr/bin/ruby Databases: SQLite: 3.32.3 - /usr/bin/sqlite3 Browsers: Chrome: 84.0.4147.135 Safari: 14.0.3

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
oliviertassinaricommented, Feb 19, 2021

@juliushuck In your codesandbox, how does it look like with a recording?

I can reproduce on Safari. In the following video I do:

  1. left click
  2. right-click
  3. right-click

https://user-images.githubusercontent.com/3165635/108512098-06024a00-72c1-11eb-9d42-8863c7194b8a.mp4

1reaction
eps1loncommented, Feb 17, 2021

It doesn’t look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

Read more comments on GitHub >

github_iconTop Results From Across the Web

[ButtonBase] Right clicking stack up ripples #24972 - GitHub
When I right click a component that has the typical material design click behavior, the color of this reaction adds up. So when...
Read more >
Use ButtonBase for ripple effect on Material UI TableRow
My table rows either end up being the wrong height (and not taking up multiple columns) or they end up being weirdly centered.....
Read more >
ButtonBase API - Material UI - MUI
Name Type Default action ref centerRipple bool false children node
Read more >
Ripple stays if multiclicked fast . #7537 - Issuehunt
If someone clicks in about >9 clicks per second for a little while (1-2 seconds) the ripples don't leave the button and it...
Read more >
When should a Material Design ripple be dark, and when ...
In the Buttons page of Google's Material Design online handbook, touch/click ripples are only mentioned in the "Buttons in motion" section, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found