zilverline / react-tap-event-plugin Goto Github PK

We are developing a game where a train scrolls continuously from the right to the left across the screen (using CSS animations). The player needs to click on a certain letter in order to win the game.

In order to avoid the 300ms delay we are using onTouchTap, but in fact it seems that the plugin almost always returns the wrong object; in this case it is the train carriage one to the left of where you have actually clicked.
With investigation I discovered that the correct target is actually in the Mouse event, and the Touch event is the one getting it wrong.

Here are some logs I have taken:

In this example in the first case the user clicks on a, and both the Touch and Mouse events return the correct target.

However, in the second case the user clicks on t, but the plugin returns i (which is the object to the left of what was actually clicked on).

I am using React 0.13-rc1 and this module fails to install because of unmet peer dependency on React 0.12.

Changing dependencies from react 0.13.x to react 0.14 and adding the fbjs dependency is a breaking change, considering npm will throw during the install now. It would be better suited in an x.Y.z version, not a patch, so that npm install ...@~0.1.7 works as expected. Not that you can change it now, of course, but perhaps putting something in the README would help others out. Thanks!

preventDefault should preventDefault. illustrated with this diff -- works for onClick, but not onTouchTap.

diff --git a/demo/application.js.jsx b/demo/application.js.jsx
index e15b0e6..fdcbc36 100644
--- a/demo/application.js.jsx
+++ b/demo/application.js.jsx
@@ -6,15 +6,35 @@ injectTapEventPlugin();
 var Main = React.createClass({
   render: function() {
     return (
-      <a
-        href="#"
-        onTouchTap={this.handleTouchTap}
-        onClick={this.handleClick}>
-        Tap Me
-      </a>
+      <div>
+        <a
+          href="#"
+          onTouchTap={this.handleTouchTap}
+          onClick={this.handleClick}>
+          Tap Me
+        </a>
+        <br />
+        <a href="https://media.giphy.com/media/JIKPuz6HSB7t6/giphy.gif"
+          onTouchTap={this.tapPreventDefault}>
+          TouchTap, Do Not Go
+        </a>
+        <br />
+        <a href="https://media.giphy.com/media/JIKPuz6HSB7t6/giphy.gif"
+          onClick={this.clickPreventDefault}>
+          Click, Do Not Go
+        </a>
+      </div>
     );
   },

+  tapPreventDefault: function(e) {
+    e.preventDefault();
+  },
+
+  clickPreventDefault: function(e) {
+    e.preventDefault();
+  },
+
   handleClick: function(e) {
     console.log("click", e);
   },

v0.1.9 introduce a breaking changes with v0.1.8.
http://semver.org/

When I try to install I get
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0-0

i think long-press shouldn't trigger a tap event, we usually want to copy words by long-press.

so i add some code to the plugin, if the touch event continue too long(after a number of test, greater then 700ms is too long), the tap event won't trigger.

When integrating multiple components that use react-tap-event-plugin (e.g. react-autosuggest) the following error appears:

Uncaught Error: Invariant Violation: EventPluginRegistry: Cannot inject two different event plugins using the same name, TapEventPlugin.

Is there a way to make sure that react-tap-event-plugin is instantiated only once?

under os x 10.10.5 and safari 8.0.8, both today's most current version. The demo do not load, require manual refresh. While on os x chrome, all work fine.

Recently I added react-tap-event-plugin to a project, and was having users tell me that certain items were not registering taps (and instead causing :hover to be triggered) . So I dug in and found that what was happening was that they were relatively 'sloppy' tapping users.

I noticed that the tapMoveThreshold is currently set to 10. (https://github.com/zilverline/react-tap-event-plugin/blob/master/src/TapEventPlugin.js#L49) Is 10 simply a number that felt right or does this correlate to something else and therefore must not change?

Please add a license file to the repo, thanks.

every other project I encountered has the same releases for NPM and github. Why do you not?

This will (correctly) not redirect the page:

<a href="/somewhere" onClick={(e) => e.preventDefault()}>Somewhere</a>

This will (correctly) not redirect the page on a real touch event (iOS Safari tap), but also (incorrectly) redirect the page on a click event (OS X Safari mouse click):

<a href="/somewhere" onTouchTap={(e) => e.preventDefault()}>Somewhere</a>

This will work for both environments, but is not desirable:

<a href="/somewhere" onClick={(e) => e.preventDefault()}
                     onTouchTap={(e) => e.preventDefault()}>Somewhere</a>

Reported: facebook#6221

I was clicking a bit to see how the UI of my little React project feels and noticed that touchTap wasn't firing half of the time. The cause seems to be this line:

if (isEndish(topLevelType) && distance < tapMoveThreshold) {

The distance check is performed for both touch events and mouse events, but for mouse it is inconsistent with the natural behavior.
Let's say there is a 100px wide element; user pushes the mouse button on the left side of the element and releases it on the right side. The element should receive a click event - and also a touchTap event, I assume.

I can fix this if it is considered a valid issue.

After I add this:

import injectTapEventPlugin from 'react-tap-event-plugin';

// Needed for onTouchTap
// Can go away when react 1.0 release
// Check this repo:
// https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin();

Both of my hot reload setup don't "hot reload" anymore:

• https://github.com/mxstbr/react-boilerplate
• https://github.com/kriasoft/react-starter-kit

If I remove it, then my changes on save are hot-reloaded in the browser (without the need to refresh the page).

any ideas?

thanks.

Version v1.0.0 breaks a few things within Material-UI have I have noticed so far:

• IconMenu no longer opens
• Buttons onTouchTap attribute no longer works, and onClick must be used

Maybe I there is some config I am missing?

My solution so far has been to stick to using v0.2.1, which does not have any of these issues. Not sure what advantages I am missing out on by not going v1.0.0. Is there a CHANGELOG file floating around?

react-tap-event-plugin includes peer dependencies on react and react-dom. The allowable react dependency includes 0.14 as well as 0.13 and 0.12. However, react-dom has a peer dependency on react 0.14 so if you are using react 0.13 and you install react-tap-event-plugin, you get a peer dependency error.

React guys released React 0.14 beta. I tried to fork the plugin and try out with React 0.14 beta but I got this error:

Uncaught TypeError: React.initializeTouchEvents is not a function

I'd love to use this in my isomorphic app, but I'm failing to integrate this.

When I specify onTouchTap handlers to my components, they simply don't fire. So, for example, to use material-ui, I've had to replace all onTouchTap's with onClick's.

I'll give some info about the context in which I'm trying to inject this - maybe some of it will be useful:

I'm using server side rendering, and bundling all of the components for use in the browser using browserify. So that I can use a cdn and to reduce the size of my bundle, I don't just bundle in the server version of react from node_modules. I use browserify-shim to achieve this. It essentially substitutes all require('react')'s with window.React in the browser bundle.

What could be the issue here?

Hi,

a MWE can be found at https://github.com/alendit/react-tap-event-bubbling-issue

When I add a listener on a bubbling of a mousedown event, which stops the further propagation, touchTap events of the children stop working (HelloTapOnly in the example). click events continue to work as expected (HelloClickAndTap).

This breaks a couple of elements in the material-ui in my use case, where I want to stop event propagation to the parent elements of a control panel. In my example I use DropDownMenu.

If you comment out the line 22 in index.js everything works fine.

Sorry I'm not sure if I'm doing it correctly but I included the following initialization code at the root of my client JS code:

injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin()

However I still encounter the 300ms lag. Am I suppose to bind onTouchTap on every single thing that is clickable? (Button, links, drop downs, tabs, etc)

I'm trying to use this in my rails project but I don't want to use RequireJS or add support for Module or any of that. Can anyone please provide a single compiled file of this that I can simply include in my manifest?

We're trying to use this library and Material UI in our app that is built with requirejs. We have a separate "react" module that's being loaded from a compiled version of React 0.13 and therefore we don't have access to the individual React modules that are needed for this patch to work.

One attempt we've made is to use browserify to build a patched version of react-with-addons and then include that in our module dependencies.

React = require("../../node_modules/react/dist/react-with-addons");
React.initializeTouchEvents(true);

injector = require("../../node_modules/react-tap-event-plugin/src/injectTapEventPlugin");
injector();

module.exports = React;

Is there a more straightforward way to accomplish this? Also, this didn't work initially. We had to downgrade to React 13.0 and react-tap-event-plugin 1.6 to get it to work.

Hello,
I'm trying to use [email protected] with react 0.14, material-ui and systemjs/jspm.

The loading seems working but i enter in an infinite "loop" when I call injectTapEventPlugin();

Without it, I can't make my material-ui app working anymore :-( (for instance iconmenus)
any clues?

regards

Hello!
Has anyone experienced triggering the tap event twice in Chrome on iPhone6? Right now I don't have demo link, but maybe this issue has already come up?

iPhone6 iOS8.1 Chrome 41.0.2272.58

The react/lib/keyOf module is no longer present inside react v0.14. He was moved to https://github.com/facebook/fbjs/blob/master/src/key-mirror/keyOf.js.

This might be a problem with my setup, but at the very least there might be some people here who have some idea of what's going on. I'm having some trouble identifying a performance issue on mobile.. maybe something on touchstart or touchmove, worse on larger pages. But after profiling it doesn't seem to be javascript.. when I test in iOS 8 Safari it gives me large red blocks of "Recalculating Styles" with no other description. The effect is smooth scrolling on small pages and awful 500+ms delayed scrolling on large pages, unless you continue scrolling through that 500ms, at which point it's smooth again until you put your finger back on the screen.

A few notes:

1. Seems to happen anywhere with real touch events -- I can't reproduce it on desktop Chrome where the timeline would be much more descriptive.
2. If I comment out injectTapEventPlugin() I no longer have any scroll lag.
3. I am calling React.render in many different places on this page, but I don't think that's an issue because commenting them out has no effect.

Hello, thank you for sharing this plugin!
Not really an issue but I would like to support mouse middle click (opening the link in a new tab)

Do you know guys where should I start to look ?
Any ideas would be appreciated.

npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0-0

This plugin lists react 0.14.0-0 as a dependency. But the latest stable version still is 0.13.3. The release candidate has been out for a couple of weeks, but the stable 0.14.0 is not out yet. I wasn't able to install the plugin because of this.

Hi,

I have a use case where I need to manually call $element.trigger('click') (to get an onClick={} to work). However, if I have an onTouchTap={} property on my component, I'm not sure how to trigger it via JS.

I've tried trigger('touch'), trigger('tap'), trigger('touchtap') but non of them worked.

Is there a way to do so?

This is not the fault of this library, but seemingly a bug in UIWebView, but I thought it would be worth recording here (and possibly implementing a workaround in the plugin) to save someone else 2 days of their life.

In short, when a Cordova app returns from some particular background state in iOS, the timestamps on touch events are offset by the amount of time the app has been in the background. This means that the cancelling of mouse events doesn't work, because the time delta between last touch and current mouse event is like 3 minutes, instead of 300ms!

We figured out a workaround, which is to use Date.now() instead of nativeEvent.timeStamp when recording the lastTouchEvent time.

I've a few ideas about how this could be incorporated into this plugin:

1. Just always use Date.now() when recording the last touch timestamp
2. Make the tap event plugin into a function that takes a timeStampResolver as a function, and have a different version of the injector that passes in Date.now as the resolver for use in Cordova apps.
3. Make the timestamp getter into a public function so the TapEventPlugin can be monkey-patched on an app-by-app basis.

Thoughts @s0meone?

i test your plugin in ios9.2 's safari and android browser.
the android perform perfectly. but the safari really poor.
how can i solve these problem?

I updated to 1.0.0 today and my material-ui component is no longer responding to click anymore. Don't know who should I turn head to. No error message. I was using 0.2.2 before. Now I rolled back to it.

What did I miss here?

Jay

I'm not sure if I'm missing something obvious, but does this work with TestUtils.Simulate? Do I just simulate the onTouchTap using a touchStart and touchEnd, or is this completely different?

The source suggests to me that it works with both touches and clicks, but my tests that were previously using Simulate.click start to fail once I change onClick in the component to onTouchTap. Any ideas?

[email protected] wants react@~0.13.x

Good to have support for 0.13 but this will break every build job currently using react 0.12.
For example, if someone has "react-tap-event-plugin": "~0.1.4", npm install will break build.

Since not all packages are up to speed with react 0.13 (it obviously has breaking changes, it's prob a good idea to bump version to 0.2 for 0.13+ and 0.1 for 0.12 stuff.

We are peer depending on react-dom, however, it is only used in the demo and therefore not required.

I have a list of clickable images:

{images.map((image) => (
  <a onClick/onTouchTap={/* stuff */}>
    <img src={image} />
  </a>))}

When scrolling through this list in iOS Safari using onClick, images are never clicked accidentally. Tapping while scrolling halts the scroll and does not pass a click event through.

When scrolling with onTouchTap, touches that were meant to scroll instead activate the touch event about 1/3 of the time. Touches meant to stop scrolling always activate a touch event.

Hello,

Using Typescript, in a .tsx file, after

import injectTapEventPlugin = require('react-tap-event-plugin')
injectTapEventPlugin()

with this JSX:

<div onTouchTap={ this.showFront }>

I get the syntax error:

error TS2339: Property 'onTouchTap' does not exist on type 'HTMLProps<HTMLDivElement>'.

in spite of having

interface HTMLDivElement {

    onTouchTap: Function,

}

in the same code file, which should merge onTouchTap into the HTMLDivElement interface used by div in lib.d.ts

The intellisense is seeing onTouchStart etc, but not onTouchTap.

Is there something wrong, or am I doing something wrong?

Thanks,

• Henrik

Touch event handlers are fired twice. Okay on PC. Haven't tried on non-Cordova mobile browsers yet.

Reproduction: https://github.com/iamale/demo-touchtapp
(Probably with other Apache Cordova targets too)

P. S. There is a possibility that it's me doing something wrong. If so, could you tell me what exactly? :)

Hello,
I know that under the hood, this plugin needs to use parts of React lib to function correctly. I would really like to import react from a CDN in my app, but I do not think there is any way to shim the dependancies and access react/lib from the window.React, that I know of. Therefore, I'm stuck bundling React myself to support this plugin. I figured at least putting this here as a note would be worthwhile, since I imagine others putting an app in production may want to keep a small js bundle size.

Thanks,
Joe

Hi there,

I'm just a little confused about how this is supposed to be used exactly. Is this just a mobile enhancement to existing onClick handlers? Or does this add an onTap event something to the event api? Or does it affect the onTouch* events.

It's probably obvious, but I'm having issues getting an onClick event to fire for a table row on mobile devices without the delay, and I'm just not sure if I'm using this library correctly. I had to add an empty onTouchStart event... probably a react issue. Here is a fiddle: http://jsfiddle.net/sadkinson/145k6bqc/4/

A super-simple example in the readme would be nice, just to be sure it is being used correctly.

Thanks,
Sean

UPDATE: Create react issue here, fyi: facebook#2931

While implementing a button component in React I feel like I'm reinventing the wheel without good documentation. I placed a question on stack overflow, but I'm curious to have your views / advise on this.

I have upgraded my app to React 0.13.1 and have tested out removing this plugin altogether and changing onTouchTap back to React's onClick. It seems that React's onClick now handles taps in iOS. Does React 0.13.x remove the need for this plugin, or are there cases that you know of where this plugin is still needed?

Thank you for the plugin!

On the material-ui repository, all the click/touch events depend on this plugin.
We have at least one issue per week of people how don't look at the documentation and complain that our component doesn't respond to click/touch interaction.

I'm looking for a way to throw a warning on all of our components if the plugin isn't injected. Any idea?
Thanks!

Any chance you could release a new version of this, so I can try it out with the new React RC?

Thanks!

In React, the click event fires if you focus on a control and press 'enter' or 'space'.

This is important since it encourages webapps to be keyboard accessibile.

Would a PR be accepted to fire onTouchTap the same way?

When I upgrade to 0.2.2, I got an error below:

Uncaught Invariant Violation: EventPluginRegistry: Cannot inject two different event plugins using the same name, `TapEventPlugin`.

I have two components require react-tap-event-plugin, each component have this line: require('react-tap-event-plugin')()

In version 0.2.1, it works fine but when I upgrade to 0.2.2, it did not work. Once I comment one of require('react-tap-event-plugin')(), it woks fine again.

I have a React Component to display some text in a DIV and trap the click / tap / touch.

var React = require('react');
var Tab = React.createClass({

  handleTouchTap: function(){
    alert('handleTouchTap');
  },
  render: function(){
    // THIS FAILS: <div className="tab" onTouchTap={this.handleTouchTap}>
    return (
    <div className="tab"  onClick={this.handleTouchTap}>
      Click Me !!!
    </div>
    )
  }
});
module.exports = Tab;

When I use 'onTouchTap' (commented out above) and click on the DIV nothing happens, the event seems not to fire and the alert never appears. But, if I swap out the onTouchTab and use a standard onClick (as shown above) then the event fires and the alert appears.

I've initialized the Plugin => my App.JSX has this at the start

/* App.react.js */
var React = require('react');
var injectTapEventPlugin = require("react-tap-event-plugin");

// Make sure React can deal with Touch Events.
React.initializeTouchEvents(true)

// Inject touch / tap handling for all components
injectTapEventPlugin();

Interestingly the event does fire if I'm using Chrome, FireFox, Safari, and IE9+)

All the requested Shims and Shame for IE8 are loaded and no Exceptions or Errors fire when using the app, other (Display components work - just nothing that requires a click works)