[added] Fast touch clicks

[kenwheeler]

• Added functionality that allows Link components to respond to the TouchEnd event, and not also fire the resulting click event.

[DONT MERGE]

Because tests are done in Firefox, I can't simulate touch events in order to test this. Did you have a recommendation?

[mjackson]

@kenwheeler Although I've never done it, I believe we can use React.addons.TestUtils.Simulate to simulate touch events in all browsers. You may need to use React.initializeTouchEvents somewhere in the test harness to enable support for touch events.

[kenwheeler]

Ok I'll check that out and get this updated, thanks.

[mjackson]

Just a thought: When this work is done it may be useful to include all the special click/touch handling in the Navigation mixin. Not sure tho. Would it be re-usable elsewhere? Or is this all very specific to <a> tags?

[kenwheeler]

Ok looks like that worked for the tests. In regards to the Navigation mixin, how would you envision that working? I would imagine that onClick & onTouchEnd would have to be manually added to a component and point at a method with a required naming convention like handleClick.

[kenwheeler]

Amended. If this looks ok to you, I'll squash these into a single commit

[mjackson]

Thanks @kenwheeler, this looks great. Let's go ahead and squash them!

The only question left in my mind is: do we always want to treat touchend the same as click? I don't think we do. Semantically, they're different. A click in touch terms is actually a touchstart + touchend in sequence in the same spot. Is anyone making higher-level "tap", "pinch", etc. mixins for React components? That would be really useful here. Then we could just mixin Tappable and get a little more accurate.

[kenwheeler]

@mjackson Looked into how the touchstart/touchend relationship is working in React and it looks like if you start on target but end off target it still fires, but if you start off target it won't. I've seen a couple wrappers like https://github.com/dogfessional/react-touchable and https://github.com/JedWatson/react-tappable.

[mjackson]

it looks like if you start on target but end off target it still fires, but if you start off target it won't

Huh, that's interesting. So you're saying that touchend fires when you start the touch on the target and end it off the target? I would expect the opposite to be true... or maybe I just don't understand touch events...

[kenwheeler]

@mjackson funny right? Try the hamburger on postocracy.com on mobile/tablet to see what I mean. Seems backwards.

[kenwheeler]

Relevant:
reactjs/react-future#15
https://www.npmjs.org/package/react-tap-event-plugin

[mjackson]

@kenwheeler Wow, I see what you mean.

I'm honestly not sure how to proceed here. We could try and roll our own touch support based on the work in react-tap-event-plugin (or just make it a dep and have a separate build for touch?) or we could just suggest users use react-tap-event-plugin together with Router.Navigation and Router.State until React core has better touch support.

I guess a 3rd option would be to just merge this in the short term with a caveat that anyone who uses it may have sketchy touch support.

@rpflorence What do you think?

[jonasi]

If you do pull this in, please at least make it configurable via some sort of options flag.

Not saying that this will cause any problems, but touch issues can be tedious to debug. I'd like to not have to worry about what's happening in my routing library if something becomes an issue in my app.

[ryanflorence]

Our <Link/> is nothing more than an <a href/>.

Any behavior that doesn't match exactly what an anchor does, I'd rather not try to do with <Link/>.

We have the right mixins for folks to create their own <TappableLink/> or whatever they want.

👎

[kenwheeler]

Agreed. I'll wait for React to address it.

[ryanflorence]

Just FYI, with this implementation, if I start a scroll on a link, scroll 200 pixels with my finger, and then stop, the link will navigate.

It's all so tricky.

[ryanflorence]

@kenwheeler also, thanks for being involved :)

[slorber]

Just passing by, I'm using React-tappable and it works great.

I've not tested yet but I think it can be used this way:

<Tappable component={Link} to="route" onTap={...}>

So it should be pretty easy to build a "TappableLink" abstraction