fix: #29 sometimes clicks bleed through to other elements.

[qimingfang]

I stumbled upon this problem today, and tried my hands at a fix. Worked for me, so maybe will work for others as well.

I think the problem is because we need to prevent the handler of the original event while we issue the onClick event handler on the react-click event. Otherwise, we risk calling onClick, then eventually triggering the onClick behavior of the javascript event again on the same x,y coordinates, resulting in clicks to bleed through

There isn't a good way to inject this into the ReactUtil tests, since this is testing the js event system, not the React synthetic event system, so this PR only assures that none of the existing tests break.

[JakeSidSmith]

Had a similar pull request to this opened before, the problem is that the preventDefault stops some other functionality, such as checkboxes, and radios, from working.

Going to have a look into this today. :)

[nealoke]

@JakeSidSmith Any update on this? I'm having a lot of bleed when using a button to trigger a popup with an input. The input currently get's clicked directly because it is at the same coordinates as @qimingfang suggested. Thanks!

[JakeSidSmith]

I've had this issue reported a lot, but never been able to reproduce. Still waiting on anyone to give me a small example project with the issue present.

[nealoke]

@JakeSidSmith I'll provide one as soon as I can, could take some time as my schedule now is quite full. Wrote it down on my todo list!

[gomo]

@JakeSidSmith I have same problem too.

I can not immediately give the project to you, but I have something I want you to try on one project you have. Will not it reproduce with the full screen web application which added from safari to the home screen? In my case, it worked normally on safari.

In addition, the problem of the select tag which is talked about in this issue also occurred in full screen .

[gomo]

@JakeSidSmith

I tried reproducing the problem.

https://gomo.github.io/react-fastclick-test/index.html

After all, adding it to the home screen and displaying it with full screen does not reproduce. Please open the page on safari with iPhone, add it to the home screen, start up and try it.

The source is here. https://github.com/gomo/react-fastclick-test

This is main component. https://github.com/gomo/react-fastclick-test/blob/master/src/js/components/App.es6

[gomo]

@ Nealoke

https://github.com/JakeSidSmith/react-fastclick/pull/33#issuecomment-293281726

I made a project to reproduce the problem so I will report it. However, it will only be reproduced when it is added to the home screen and started with full screen. If you have any code to reproduce with normal safari please provide it.

[JakeSidSmith]

@gomo sorry I haven't responded yet. Will try to take a look some time this week.

[nealoke]

@JakeSidSmith @gomo Thanks!

Note that this is also on android chrome, not on desktop

[JakeSidSmith]

Released an alpha version with these changes: https://github.com/JakeSidSmith/react-fastclick/pull/50

If @gomo @nealoke @qimingfang could test and see if it's fixed your issues, that'd be great. :)