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.

Sign up for GitHub

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

Jump to bottom

Setting pointerEvents to "box-none" prevents triggering onTouch* and onLayout events on the element #897

Closed
dcalhoun opened this issue Jan 6, 2022 · 5 comments · Fixed by #906
Closed

Setting pointerEvents to "box-none" prevents triggering onTouch* and onLayout events on the element #897

dcalhoun opened this issue Jan 6, 2022 · 5 comments · Fixed by #906

Comments

@dcalhoun
Copy link
Contributor

dcalhoun commented Jan 6, 2022 •
edited

Describe the bug

Setting pointerEvents: 'box-none' on a View prohibits triggering onTouch* or onLayout events on the View. This behavior differs from React Native itself. This Expo Snack showcases that pressing the child Pressable of a <View pointerEvents="box-none" /> still triggers the onTouchStart and onTouchEnd events. This change in behavior, which appears to differ from React Native, began in with 7.2.0 due to changes in #655.

Expected behavior

Invoking fireEvent.trigger(viewWithPointerEventsBoxNone, "onTouchStart") results in triggering the View's onTouchStart handler.

Similarly, invoking fireEvent.trigger(viewWithPointerEventsBoxNone, "onLayout") results in triggering the View's onLayout handler.

Steps to Reproduce

  1. Press the "Press me" text in the Expo Snack to observe the expected behavior.
  2. Clone the reproduction case, specifically the pointerevents-box-none-and-ontouchevents branch.
  3. npm install
  4. npm run test

Screenshots

n/a

Versions

  npmPackages:
    @testing-library/react-native: ^9.0.0 => 9.0.0
    react: 17.0.2 => 17.0.2
    react-native: 0.66.4 => 0.66.4
    react-test-renderer: 17.0.2 => 17.0.2
@dcalhoun dcalhoun changed the title Setting a View's pointerEvents to "box-none" prevents triggering onTouch* events on the View Setting pointerEvents to "box-none" prevents triggering onTouch* and onLayout events on the element Jan 7, 2022
@dcalhoun dcalhoun mentioned this issue Jan 7, 2022
Merged
7 tasks
@thymikee
Copy link
Member

We support gesture responder system, but not onTouch*. I see they're not documented though. Ideas why is that?

@dcalhoun
Copy link
Contributor Author

We support gesture responder system, but not onTouch*. I see they're not documented though. Ideas why is that?

@thymikee great question. I am not sure. I found facebook/react-native#23686, which attempted to open a discussion on this specifically. It was closed as off-topic. Unfortunately, there does not appear to be a new discussion in the appropriate issue tracker.

In regards to onLayout, it is documented. Is it safe to presume this library should support triggering it with fireEvent('layout', myElementWithOnLayout)? If so, I am happy to update my reproduction to include an onLayout example or open a PR with a failing test.

@thymikee
Copy link
Member

Is it possible onTouch* are only available with Fabric renderer? There's an example using those so it's definitely an existing feature, but not well documented: https://github.com/facebook/react-native/blob/8bd3edec88148d0ab1f225d2119435681fbbba33/packages/rn-tester/js/examples/PointerEvents/PointerEventsExample.js

In this light we should extend our pointer events support to these events. onLayout should work as well, yes.

@dcalhoun
Copy link
Contributor Author

Is it possible onTouch* are only available with Fabric renderer?

No, I do not believe so. The failing test case I provided for this issue originates from the WordPress Gutenberg project, which utilized onTouch* alongside of React Native 0.61.5 at the time. I do not believe React Native 0.61.5 leveraged the Fabric renderer.

In this light we should extend our pointer events support to these events. onLayout should work as well, yes.

👍🏻 Great.

@dcalhoun dcalhoun mentioned this issue Jan 22, 2022
Merged
@dcalhoun
Copy link
Contributor Author

I opened #906 for consideration to resolve this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Trigger non-touch events on box-none targets dcalhoun/react-native-testing-library
2 participants
@dcalhoun @thymikee