React fast click double firing on onChange

[hrjason]

Hey guys,

So I've noticed that react-fastclick double fires despite using an event.stopPropagation() and event.preventDefault() on the delegated onChange method. This issue seems to only be contained to iOS devices running Safari.

According to the console.log(event.type, event.fastclick), I have been outputting react-change and undefined respectively from the onChange's event.

Safari's timeline suggests that a scroll event is being emitted after the touchStart, but nothing in my code pertains to that. If i were to remove fast click, the issue resolves itself.

Currently running react 0.14.7 with the latest version of react-fastclick.

[hrjason]

I referred to this fix, as this is a very similar scenario: https://github.com/JakeSidSmith/react-fastclick/issues/22

However if this were the case, the latest fix should of resolved it - which it's not.

Any help would be greatly appreciated

[JakeSidSmith]

I'll try to take a look at this today. On what elements is the onChange being triggered twice? Selects?

[JakeSidSmith]

About to release 3.0.2 which may fix this issue. If you could try it out and close this issue if it's fixed, that'd be awesome.

[robr24]

This still seems to be happening, with version 3.0.2.

[dshuvalov]

@JakeSidSmith in my react app there are checkboxes. When I enable react-fastclick then checkboxes respond at the onChange method once and a click on them does not react anymore (onChange method does not request). Very strange bug

[John-C2]

@JakeSidSmith @Chypa74 I was just noticing the same issue. Everything worked as expected on the first tap, and then subsequent taps weren't triggering the onChange event in the console at all.

[JakeSidSmith]

Hey, @John-F-C2 , @Chypa74

Could you let me know which version of react-fastclick you are using, the device (and version if applicable), operating system version, browser and browser version you are experiencing these issues on? 🙂

[dshuvalov]

@JakeSidSmith Hi. This bug appears on various devices like iphone, macbook or android (OS versions: iOS 11.3.1, macOS 10.13.4 and android latest). As for browsers I used Google Chrome (66.0.3359.139) and Safari (11.1)

[John-C2]

@JakeSidSmith my package file has react-fastclick: ^3.0.2 on iOS 11.3.1. My issues all center around inputs & labels. I thought it was finally golden only to realize that it wouldn't trigger again after the first tap or in other cases it wouldn't activate the selected/checked state as expected. Appreciate any insight you might have.

 <input name="test[]" onChange={this.handleChange} id="test1" type="checkbox" value="1" />
 <label htmlFor="test1" onClick={this.testEvent}>Test</label>