Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Event "onTouchTap" not working. #1192

Closed
fredeastside opened this issue Jul 17, 2015 · 8 comments
Closed

Event "onTouchTap" not working. #1192

fredeastside opened this issue Jul 17, 2015 · 8 comments
Labels
bug 🐛 Something doesn't work

Comments

@fredeastside
Copy link

I use material-ui with requireJS. "onTouchTap" event not working. I don't see any bugs in console. If i change "onTouchTap" to "onClick" everything begins to work. "react-tap-event-plugin" included

require(['config'], function(config) {
    require(["pace", "react-tap-event-plugin", "app/app"], function(Pace, injectTapEventPlugin, App) {
        Pace.start();
        injectTapEventPlugin();
        console.log('Application init...');
        App.start();
    });
});

I saw that the same bug was in issues, but solution didn't found. What should I do to find the solution of this problem?

@slorber
Copy link

slorber commented Jul 20, 2015

maybe related?

zilverline/react-tap-event-plugin#22

@genyded
Copy link

genyded commented Nov 11, 2015

This really is a ROYAL PAIN!!! You could hack this to work before, but now you can't even do that (without using older versions of dependencies which then means you have to deal with other issues addressed in newer versions). Why the heck are onClick events not events provided?

Anyone using external React (which many of us have no say in) cannot use Material UI. It's worsened by Material UI adding in the tap event plugin as a dependency in newer version of Material UI taking version control away.

Guess it's back to hacking Materialize to make it work although we'd much prefer Material UI... can't spend weeks getting other peoples crap to work because they decided to do a one off and use touchTap events with a temporary external solution..

@damienfa
Copy link

Related to : #3465 (comment)

@saumya
Copy link

saumya commented Mar 8, 2016

I am facing the same problem with version 0.15.0-alpha.1 !

react-tap-event-plugin is injected but neither onTitleTouchTap , onLeftIconButtonTouchTap on the AppBar works nor onTouchTap on a RaisedButton works !

Are there any workarounds for this ?

@sanjayp
Copy link

sanjayp commented Jun 26, 2016

react-tap-event-plugin is the software equivalent of a tumor - if it shows up ANYWHERE in your dependency tree, it forces you to bundle and serve the react lib with your app. Relying on it was a tremendously misguided design decision. I would strongly urge anyone reading this to reconsider using material-ui if you have any intent of following best practices and relying on an external CDN for the react dependency. You guys should really add a warning in the README about this.

EDIT: By the way, in case it's not clear why this is a problem. Approximately 20% of my app's size is the react lib itself (material-ui is also beefy and you guys should really break it up into chunks, but that's a separate issue). The only remaining hard dependency on react lib that I can't get rid of is react-tap-event-plugin. So your single decision to use that is costing me 25% more bandwidth to serve my app than I should otherwise need and that's absolutely unacceptable.

@dianafaye17
Copy link

dianafaye17 commented Jul 14, 2016

I'm also having this problem.

Update: Updating to "react-tap-event-plugin": "^1.0.0" fixed the problem.

@nealeu
Copy link
Contributor

nealeu commented Dec 10, 2016

[edited] For anyone else visiting here, the simple answer is:

  • don't include the plugin (it's not getting merged into React)
  • use onClick

This will mean the 300ms delay issue is there for some old browsers, but if you are only supporting modern browsers, you'll be okay. If not, you have my sympathy.

However, beware, many components use onTouchTap internally (e.g. Snackbar's action) so this will fail (see #4342 where there is a recommendation to use https://github.com/cljsjs/packages/tree/master/material-ui which bundles React).

Work is however in progress towards a version that works without the plugin on the 'next' branch (see #4342 (comment))

@hotdang-ca
Copy link

I did, in the meantime, have some luck passing in a reference to a PropType.func in the RaisedButton's onTouchTap, as in:

<RaisedButton onTouchTap={this.props.onCancelTapped} label="Cancel" />

In this case, the component's parent handles the cancelTapped event, successfully.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work
Projects
None yet
Development

No branches or pull requests