Material-ui: Event "onTouchTap" not working.

[fredeastside]

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]

maybe related?

https://github.com/zilverline/react-tap-event-plugin/issues/22

[genyded]

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]

Related to : https://github.com/callemall/material-ui/issues/3465#issuecomment-188766128

[saumya]

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]

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]

I'm also having this problem.

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

[nealeu]

[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 https://github.com/callemall/material-ui/pull/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 https://github.com/callemall/material-ui/pull/4342#issuecomment-267400053)

[hotdang-ca]

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.