Touchable onPress not always called inside a list

[tafelito]

The problem
Sometimes the Touchable onPress event is not called when I'm inside a scrollview. It doesn't happen all the time but when I test it outside the scrollview, onPress event is always dispatched.

What I noticed debugging it is that the onPress is not being called because the signal is LEAVE_PRESS_RECT. It looks like this happens if I slightly move the mouse when clicking the touchable

Expected behavior
onPress to be always called

Environment (include versions). Did this work in previous versions?

• React Native for Web (version): 0.9.1
• React (version): 16.5.2
• Browser: any

Additional context

These are the events logs when only the onPressIn and onPressOut events are called and not the onPress

curState NOT_RESPONDER
nextState RESPONDER_INACTIVE_PRESS_IN
signal RESPONDER_GRANT
curState RESPONDER_INACTIVE_PRESS_IN
nextState RESPONDER_ACTIVE_PRESS_IN
signal DELAY
startHighlight

pressIn

curState RESPONDER_ACTIVE_PRESS_IN
nextState RESPONDER_ACTIVE_PRESS_OUT
signal LEAVE_PRESS_RECT
endHighlight

pressOut

curState RESPONDER_ACTIVE_PRESS_OUT
nextState NOT_RESPONDER
signal RESPONDER_RELEASE

And these when the onPress is called

curState NOT_RESPONDER
nextState RESPONDER_INACTIVE_PRESS_IN
signal RESPONDER_GRANT
curState RESPONDER_INACTIVE_PRESS_IN
nextState RESPONDER_ACTIVE_PRESS_IN
signal DELAY
startHighlight

pressIn

curState RESPONDER_ACTIVE_PRESS_IN
nextState NOT_RESPONDER
signal RESPONDER_RELEASE
endHighlight

pressOut

hasLongPressHandler true
pressIsLongButStillCallOnPress undefined
shouldInvokePress true

press

[necolas]

Are you moving the mouse outside the touchable boundary?

[tafelito]

Not intentionally. Is just the movement that happens naturally when I click the mouse

[necolas]

But is the mouse moving outside the boundaries of the touchable?

[tafelito]

No

[c-goettert]

We face the same issue, when slightly moving the mouse (leaving it inside the clickable), onPress / onClick isn't fired.

edit: For me the reason for this bug was using the InvertibleScrollView Component. Touchables inside this inverted View seem to be buggy (seems like the touch-area is not inverted when moving the mouse).

[aligg]

Problem: We are facing the same issue and have done a fair bit of testing. Across multiple browsers, if you hold the mouse very still onPress triggers, but if the mouse is in motion onPress does not work.

Expected Behavior onPress fires so long as the clickevent occurs inside the boundaries of the touchable.

Environment
React: 16.6.1
React-Native-Web: .9.8
Browsers: Safari, Firefox, Chrome

Addl Context
Our custom button is basically:

<TouchableOpacity
    onPress={this.props.onPress}
>
   <Text/>
</TouchableOpacity>

The onPress triggers intermittently and it seems to be similar to the issue others have described, where the onPress doesn't work if the mouse is in motion.

[necolas]

Closing this issue so we can coordinate findings and solutions in #1219