Pointer Events check sometimes returns false positives

[MattyBalaam]

Reproduction example

https://codesandbox.io/s/exciting-fire-b1ibfk?file=/src/App.test.js

Prerequisites

If you run a userEvent.click on an element which then has pointer-events: none added after the interaction, then the next userEvent.clickon a different element thinks the element inherits pointer-events: none

Expected behavior

userEvent.click should not throw a warning.

Actual behavior

Error thrown “Unable to perform pointer interaction as the element has or inherits pointer-events set to "none".”

User-event version

14.0.4

Environment

See sandbox, which is using React 18. I also see the issue in React 17 locally.

Additional context

No response

[ph-fritsche]

Thanks for the report. ❤️

Looks like this is not a false-positive for the other element. The implicit movement of the cursor out of the previously hovered element (that now has pointer-events: none) triggers the error.
Replacing the user.click with userEvent.click, i.e. starting a new "session", works, because it considers the pointer to be at document.body.

I think first of all we should improve the error message and report the target element as well as the element which has pointer-events: none.

Then we should probably not throw an error but just skip the events if the target was not explicitly mentioned in the API call, i.e. click(elX) should only throw if elX receives no pointer events. Removing the check for previous position might be a mistake though, because unhover(elX) should probably still throw.

[stefan2718]

For other users hitting this issue, I've worked around it by updating my config to ignore the hover events

const user = userEvent.setup({ skipHover: true });

[desmond-tuiyot]

For other users hitting this issue, I've worked around it by updating my config to ignore the hover events

const user = userEvent.setup({ skipHover: true });

My userEvent import doesn't have any property like setup. How does this solution work exactly?
EDIT: seems like this was introduced in v14, and I'm still on v13.

[github-actions]

🎉 This issue has been resolved in version 14.2.6 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[ph-fritsche]

@all-contributors add @MattyBalaam bug

[allcontributors]

@ph-fritsche

I've put up a pull request to add @MattyBalaam! 🎉

[rotimidokun]

I changed my approached based on @ph-fritsche first comment
from await user.click(element) to declaring element as variable and calling element.click()

works for me.

[EEBK99]

@rotimidokun please share your code or test case snippet.

[rotimidokun]

@EEBK99 i don't remember where i wrote that code, but it looks something like this

const element = getByRole('button', {name: "test"})

Instead of await userEvent.click(element)

I used element.click()

[ph-fritsche]

This is not a good replacement for userEvent.click - see this post on why you should use the user-event Api.
If you use the latest version of user-event and have problems, please file an issue with a reproduction example.

[rotimidokun]

okay, thanks. @ph-fritsche

[quickEscape]

I still have the issue in 14.4.3

[Lokua]

I also have this issue in 14.5.1. Unfortunately I do not have capacity to add a repro right now.