React-native-web: TouchableOpacity onPress doesn't fire every time

[anija]

Hi,

i've noticed that the event onPress on TouchableOpacity is not firing every time. If the click is fast enough, it doesn't fire.
This wasn't happening on 0.11.x releases.

[christophemarois]

Also noticed this issue!

[Hinkapie]

I also noticed

[DennisOosterling]

This is actually reproducible by dragging while clicking. Even it is a very small change of pointer position (even within the button) the onPress will not be triggered. If you stay on exactly the same position and click it gets triggered every time.

experiencing this with version: "react-native-web": "0.11.7"

[anija]

I'm happy to see i'm not alone.

Only to me this seems a blocking issue?
After 14 days no one of the mantainers of this repo has even seen this topic?

[javascripter]

I ended up using onClick instead of onPress for Touchables. This is just a workaround and not a proper solution because it doesn't interact with the responder system.
Hopefully this will be fixed with the Responder system rewrite?

<TouchableOpacity onClick={() => {} />

[necolas]

There's a reason why I provide an issue template and it's because I need all the info the template asks for to help debug issues. Please fill it out

[javascripter]

I'm still trying to find a minimal reproducible example but my case is the same as what DennisOosterling described.

In my observation the problem (button losing pressed state when pointer moves very slightly) only occurs when the page is scrolled down at least a little. When the page is at the top, buttons work normally. My websites uses body scrolling, but not too sure if it's related

[javascripter]

I have filled out the template. Hope this helps.
The problem

A small change in the pointer position while the button is being pressed causes the TouchableOpacity button to lose its active (pressed) state.

How to reproduce

https://codesandbox.io/s/elastic-almeida-rjqte

Steps to reproduce:

1. Scroll down to see the buttons
2. Press the button
3. While the button is pressed down, move the pointer slightly
4. The button loses its pressed state even while the pointer is inside the button.

Expected behavior

The button keeps its pressed state when the pointer is inside the button or when the pointer moves out of the button and then moves back inside the button.

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

• React Native for Web (version): 0.12.2
• React (version): 16.12.0
• Browser:
  Google Chrome: Version 80.0.3987.163 (Official Build) (64-bit)
  Safari: Version 13.0.5 (15608.5.11)

I only tested with the above but may happen with other browsers.

[necolas]

If the page is scrolled the press should be cancelled, so if that's what it happening it is correct behavior both for RN and vanilla JS

[javascripter]

I think that is not the issue I described above. The problem is not that while I'm scrolling down the button gets cancelled, but the button is cancelled immediately when the body has scrollTop > like 50 or something and pointer moves very slightly while pressing the button. (with no movements of scroll position of body)

When the body scrollTop is like > 500px
https://gyazo.com/329f99d01036b7dacb30ddf0f51b3ac3

When body scrollTop is 0
https://gyazo.com/a502a34a529eb057dabd2317fdd84066

You can see buttons behave differently.

[DennisOosterling]

There does seem to be a difference between onClick & onPress behaviour. I created another codesandbox and gif the show the issue we're experiencing. (The gif is taken on the output of the code in the codesandbox ).

When the view is not scrollable, the Touchable components work fine.

https://gyazo.com/2998eeda5ec88cb33ca4296b4ba092ab

https://codesandbox.io/s/sad-galois-999w5?file=/src/App.js:333-399

[necolas]

the button is cancelled immediately when the body has scrollTop > like 50 or something and pointer moves very slightly while pressing the button

Yes that's a known issue too and it's due to how RN implemented Touchable by measuring the rect of the button. Rewrite of that code is the solution as per https://github.com/necolas/react-native-web/issues/1538

[necolas]

Please try version 0.0.0-33f8505d6 (a canary release) and let me know if the problem is resolved. See #1538

[javascripter]

Thanks for maintaining this wonderful framework. Buttons are now working correctly for me.
Tested with react-native-web 0.0.0-87ea51c19.