Repository navigation
Setting pointerEvents to "box-none" prevents triggering onTouch* and onLayout events on the element #897
Description
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
- Press the "Press me" text in the Expo Snack to observe the expected behavior.
- Clone the reproduction case, specifically the
pointerevents-box-none-and-ontoucheventsbranch. npm installnpm 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
Activity
[-]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[/+]thymikee commentedon Jan 21, 2022
We support gesture responder system, but not
onTouch*. I see they're not documented though. Ideas why is that?dcalhoun commentedon Jan 21, 2022
@thymikee great question. I am not sure. I found react/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 withfireEvent('layout', myElementWithOnLayout)? If so, I am happy to update my reproduction to include anonLayoutexample or open a PR with a failing test.thymikee commentedon Jan 21, 2022
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.jsIn this light we should extend our pointer events support to these events.
onLayoutshould work as well, yes.dcalhoun commentedon Jan 21, 2022
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 Native0.61.5at the time. I do not believe React Native0.61.5leveraged the Fabric renderer.👍🏻 Great.
dcalhoun commentedon Jan 24, 2022
I opened #906 for consideration to resolve this issue.