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

[thomasjahoda]

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:

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

[thomasjahoda]

I fixed it here:
thomasjahoda@7a7bf51
However, I did not write tests, probably didn't fix it everywhere, didn't adapt any types (if necessary? idk) and don't intend to spend more time on this, so I thought I probably shouldn't open a pull request. However, my code to fix it can be freely used and seems to work.

[ZeeshanTamboli]

@thomasjahoda Thanks for the fix — I’ll keep this issue open in case others run into the same problem. Not sure if we should include it natively, since it only affects the swipe-to-go-back gesture. We’ll need to test it thoroughly before deciding.