mantine icon indicating copy to clipboard operation
mantine copied to clipboard

ScrollArea doesn't always reset blocking pointer events on body tag

Open t-vince opened this issue 1 year ago • 0 comments

Dependencies check up

  • [X] I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.12.0

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

Chrome

Describe the bug

In the ScrollArea component when scrolling, pointer-events are set to none and when scrolling stops this is reset back to auto. This behavior happens since https://github.com/mantinedev/mantine/commit/bd6fad374b88894c6615386b47f5899cdeab2929 with

onPointerDown={composeEventHandlers(props.onPointerUp, (event) => {
          [...]
          document.body.style.pointerEvents = 'none';

and gets reset with

onPointerUp={composeEventHandlers(props.onPointerUp, (event) => {
          [...]
          document.body.style.pointerEvents = 'auto';

However, this does not always work reliably. When clicking next to the scrollbar after scrolling, it can cause it to not reset the this pointer event, which makes it seem that the whole page freezes as it no longer takes pointer input. Only way to make the page function again is to remove the pointer-events: none; from the body tag or refreshing the page.

The last version where this is not reproducible is 7.10.1 (the version before the mentioned commit) It is also reproducible on the mantine website, on the ScrollArea page

https://github.com/user-attachments/assets/e01dc3c6-109d-4ff6-afd4-d05dd2b7130b

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

It seems that the pointerUp event is not always correctly triggered. I'd propose to just revert the pointer-events on body PR, make this optional so people can opt-out or scope it to the scrollArea instead of the body tag. Currently it's quite risky; when it fails, it disables the complete page and not just the ScrollArea component.

Self-service

  • [ ] I would be willing to implement a fix for this issue

t-vince avatar Aug 16 '24 14:08 t-vince