Ignoring input events & `pointerEvents="none"`

timoxley commented 7 years ago

Description

Use-case: I want input events to reach elements which are obscured by a translucent Image.

Currently, I don't see a way to interact with objects which are visually obscured. Based on the documentation I assumed pointerEvents="none" would achieve this:

Controls whether the View can be the target of touch events.

But currently pointerEvents="none" doesn't seem to do anything, at least outside of VR, when using the mouse.

It's not clear what "touch events" means in the context of VR so it is possible I am doing something wrong, or am misinterpreting the intention of pointerEvents="none".

Repro

In this example, I expected the event handlers from the "middle" box to never fire, and the events for the "behind" box to fire when cursor hovers over it, regardless of whether the cursor is also over the "middle" box. See the console to see a log of the events occurring.

https://gist.github.com/timoxley/4f3cbf78d6f942314d6cb2fa4922c8ef

Expected behaviour

In the DOM pointer-events: 'none'; will set an element to behave as if the element is simply not there. The element becomes totally invisible to the mouse cursor, thus items which are behind it will receive the events, even if the element you're interacting with is not actually visible.

I expected setting pointerEvents="none" to have the same behaviour, where the element becomes invisible to input, allowing items behind it to receive the events instead.

Actual behaviour

Currently it seems event handlers like onInput and onEnter are fired by the topmost intersecting view, and events will not be received by any elements which are obscured, regardless of whether pointerEvents="none" is set or not.

Solution

Ideally pointerEvents="none" should have the same/similar behaviour as its DOM analog. Rays should totally ignore anything with pointerEvents="none", and proceed as if the object simply isn't there. Event handlers shouldn't fire and elements which are obscured should receive the events instead.