Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[charts] PieChart throws Uncaught DOMException when swiped on mobile layout in Firefox #14654

Open
mrerdem opened this issue Sep 17, 2024 · 5 comments
Labels
bug 🐛 Something doesn't work component: charts This is the name of the generic UI component, not the React module! mobile Targets mobile platform

Comments

@mrerdem
Copy link

mrerdem commented Sep 17, 2024

Steps to reproduce

Link to live example: https://mui.com/x/react-charts/pie/

Steps:

  1. Go to react pie chart page of MUI-X
  2. Switch to mobile layout (on Firefox)
  3. Enable touch simulation
  4. Scroll the page vertically using the area with the pie chart
  5. Repeat scrolling motion again (probably up to 3) if error is not thrown at first try

Current behavior

Chart throws an error:
Uncaught DOMException: Element.releasePointerCapture: Invalid pointer id

and causes tooltip to stay permanently visible (only reproducable on Firefox for Android).

Expected behavior

No error should be thrown and tooltip should become invisible after touch action is released.

Context

No response

Your environment

npx @mui/envinfo
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: PieChart DOMException

@mrerdem mrerdem added bug 🐛 Something doesn't work status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Sep 17, 2024
@mrerdem mrerdem changed the title PieChart throws Uncaught DOMException when swiped on mobile layout in Firefox [charts] PieChart throws Uncaught DOMException when swiped on mobile layout in Firefox Sep 17, 2024
@github-actions github-actions bot added the component: charts This is the name of the generic UI component, not the React module! label Sep 17, 2024
@michelengelen
Copy link
Member

Hey @mrerdem ... I have tried to reproduce the bug by following the steps you provided, but did not manage to do so. Could you maybe share a video of you forcing that bug? Thanks! 🙇🏼

@michelengelen michelengelen added status: waiting for author Issue with insufficient information mobile Targets mobile platform and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Sep 18, 2024
@mrerdem
Copy link
Author

mrerdem commented Sep 18, 2024

It is definitely not clear in the video, but in my first try I could get the error in 5th swipe trial.
Peek

The error at the 5th swipe is:
Uncaught DOMException: Element.releasePointerCapture: Invalid pointer id NextJS 54 onPointerLeave eB eH rh rh rm rS u4 eD rS tZ tG rk ry rb rb hydrateRoot eE e x value I o u exports t exports ew eS e x value I o u promise callback*o u promise callback*o u promise callback*o u exports t exports eR eP 78169 promise callback*78169 l <anonymous> O <anonymous> c <anonymous> 4330-993e7c78d57b2912.js:1 NextJS 15 forEach self-hosted:4288 NextJS 39

@github-actions github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Sep 18, 2024
@michelengelen
Copy link
Member

Ok, I can reproduce now as well ... took me more tries and some swirling arouind on the pie chart area before it got that far.

I'll add this to the board.

@michelengelen michelengelen removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 18, 2024
@alexfauquette
Copy link
Member

Yes, to reproduce it, you need to touch down on one slice and touch up on another one. It's surprising that only firefox has this issue. can't reproduce it on chrome

@mrerdem
Copy link
Author

mrerdem commented Sep 19, 2024

A possible solution to #13885 could automatically solve this issue as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: charts This is the name of the generic UI component, not the React module! mobile Targets mobile platform
Projects
None yet
Development

No branches or pull requests

3 participants