mui / mui/material-ui

[Tooltip][Button] Touchcancel events are not listened to, leading to stuck Tooltips and Ripple effects

Open
#46,158 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

scope: button scope: tooltip
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Steps to reproduce

Steps:

  1. 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.
  2. Open this link to live example: Live example
  3. 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:
Image

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.