[Tooltip][Button] Touchcancel events are not listened to, leading to stuck Tooltips and Ripple effects
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
Steps:
- Prepare a mobile device configured to start a back gesture when swiping from the sides, e.g. some Android with swipe gestures enabled. I used Chrome on Android 14 on a Pixel 8.
- Open this link to live example: Live example
- Press long on a button in a way that will both show the tooltip and also trigger the system (Android) back gesture, but then move your finger back to the side to cancel the back.
- See this video as demonstration
Relevant screenshot:
Current behavior
Tooltips may be shown indefinitely on mobile, when a touchcancel event (e.g. from Android back gesture) is emitted instead of a touchend event. Same thing with button touch ripple effects, which I have not included in the repro.
Expected behavior
Tooltips and Button ripple effects (and probably lots of other components) should treat touchcancel events similar to touchend events.
Context
Tooltips and button touch ripple effects shouldn't get stuck in any case.
I've often accidentially triggered a tooltip in this way, which will be shown indefinitel. And I've often returned to my app to find the bottom nav button to have a stuck ripple effect because swiping bottom up to go to the Home-Screen triggered a similar bug.
Your environment
Also reproduced on master branch, with commit fc576551ae6a43c8a0859f48547ed9f280c0bfe5.
npx @mui/envinfo
System:
OS: macOS 15.3.2
Binaries:
Node: 22.9.0 - ~/.nvm/versions/node/v22.9.0/bin/node
npm: 10.8.3 - ~/.nvm/versions/node/v22.9.0/bin/npm
pnpm: Not Found
Browsers:
Chrome: 136.0.7103.114
Edge: Not Found
Safari: 18.3.1
npmPackages:
@emotion/react: ^11.11.4 => 11.11.4
@emotion/styled: ^11.11.5 => 11.11.5
@mui/core-downloads-tracker: 7.1.0
@mui/icons-material: ^7.1.0 => 7.1.0
@mui/material: ^7.1.0 => 7.1.0
@mui/private-theming: 6.4.1
@mui/styled-engine: 6.4.0
@mui/system: 6.4.1
@mui/types: 7.4.2
@mui/utils: 6.4.1
@mui/x-date-pickers: ^7.24.1 => 7.24.1
@mui/x-internals: 7.24.1
@mui/x-tree-view: ^7.24.1 => 7.24.1
@types/react: ^18.3.17 => 18.3.17
react: ^18.2.0 => 18.3.1
react-dom: ^18.2.0 => 18.3.1
typescript: 5.8.3 => 5.8.3
Search keywords: touch,touchcancel,android,tooltip,rippleeffect
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
Reproduce the Android back-gesture scenario from the linked StackBlitz example, then trace touch handling for Tooltip and Button ripple effects using the issue's touchcancel keywords. Done means a canceled touch clears both effects instead of leaving them stuck, with regression coverage for the behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100