Refactor to work with React 0.14 (and older)

[JakeSidSmith]

• Modify elements that have onClick props with additional event props
• Decrease chance of memory leaks
• Fixes #13 (removing, hiding and moving elements still triggering click events)
• Click events only triggered if touch released on same element
• Allow standard onClick events to happen (allowing checkboxes, labels, inputs, focusing, etc to function)
• Handle special cases for inputs etc be focussed / accessed quickly
• Remove need for timeouts
• Handle React.DOM.x element creation
• Support 0.14+ (fixes #14)
• Support older versions of React (theoretically - not tested)

New features (mentioned in / fixes #4)

• Added event.button = 0
• Changed event.type to click
• Added event.fastclick = true
• Copy touch positions to event

Need testers! Update your package.json

"react-fastclick": "git://github.com/jakesidsmith/react-fastclick.git#refactor-for-0.14"

Include react-fastclick

require('react-fastclick');
// or if you're using ES6
import 'react-fastclick';

Please post what version of react you've tested with, what devices / browsers you've tested on, which elements / components (if any) you have had problems with, and what libraries may be affecting this.

[slybridges]

Hi @JakeSidSmith,

I stumbled upon your repo as I was looking for an alternative to fastclick. Fastclick doesn't work properly natively with react-select on mobile.

Your PR makes it work correctly, so yay ! :)

However there seem to be a conflict with the Link component of react-router: when I navigate to the app and click on Link components, the app performs a full refresh of the page.

If I remove react-fastclick Links work properly again (but indeed, the whole app feels sluggish on mobile).

Some info:

• Tested on Safari Mobile, on IOS 9.2
• react v0.14.6
• react-router: 2.0.0-rc4 using browserHistory

[JakeSidSmith]

Thanks for testing this out @slybridges. I thought I had fixed the issues with react-router, but I guess not. Will take a look later today. :)

[JakeSidSmith]

@slybridges Have just tried this branch out with 2 different projects that use react-router, and I don't have this problem. Though they are running react-router versions 0.13 and 1.0.0. Could you try clearing react-fastclick from your node_modules and rebuild. If you still experience that issue, I'll create a new project with react-router 2.0.0 and try to debug. :)

[slybridges]

Hi @JakeSidSmith unfortunately clearing the module from node-modules didn't help.

I was able to reproduce the issue using theredux-easy-boilerplate repo https://github.com/anorudes/redux-easy-boilerplate).

You'll find a version ready to be tested along with my observations there: https://github.com/slybridges/redux-easy-boilerplate/tree/master

As you'll notice, problem seems to be with using react-fastclick along with createHistory (the one using HTML5 API). Using createHashHistory (the one using legacy '#' keyed URLs), no problem arises. And using createHistory without react-fastclick works too.

Hope this can be of some help for you!

[JakeSidSmith]

Hey, @slybridges think it's fixed now.

The link component was checking for the button that was clicked (to make sure it wasn't a right click), so I'm just adding this to the event - event.button = 0;.

I've also modified the event.type to be click to avoid other libraries that may check for this, and added a fastclick key so users scan still tell the difference as mentioned in #4.

Will do some additional work to push in clientX, pageX, etc so that people that are expecting an actual click event can still access all the usual values, and then this branch should be good to go. :)

[slybridges]

Hi @JakeSidSmith, it seems to be working alright for me now thanks ! Although I'm yet to deploy to production environnement with it and asses the benefits :)

[manosim]

@JakeSidSmith Looks awesome :sparkles:

[glenjamin]

Awesome 🤑