Im trying out material-ui and react and I'm running into an issue with events not firing. I have installed the react-tap-event-plugin and I call injectTapEventPlugin() while bootstrapping the application.

toggleMenu is never called in the following snippet:

/** @jsx React.DOM */
var React = require('react');
var mui  = require('material-ui');
var LeftNav = mui.LeftNav;
var MenuItem = mui.MenuItem;
var AppBar = mui.AppBar;
var App = React.createClass({

  getInitialState: function () {
    return {
      message: 'Hello World!'
    };
  },
  toggleMenu: function () {
    console.log('clicked hamburger'); //<-- This is never fired
    this.refs.menu.toggle();
  },

    render: function() {
        var menuItems = [{ route: 'get-started', text: 'Get Started' }];
        return (
<div>
    <AppBar onMenuIconButtonTouchTap = {this.toggleMenu}  title = "Hej" />
    <LeftNav ref = "menu" docked = {false}  menuItems = {menuItems} />
</div>
        );
    }

});

module.exports = App;

The full code example can be checked out from here:

Happy for any suggestions on what Im doing wrong!

Im trying out material-ui and react and I'm running into an issue with events not firing. I have installed the react-tap-event-plugin and I call injectTapEventPlugin() while bootstrapping the application.

toggleMenu is never called in the following snippet:

/** @jsx React.DOM */
var React = require('react');
var mui  = require('material-ui');
var LeftNav = mui.LeftNav;
var MenuItem = mui.MenuItem;
var AppBar = mui.AppBar;
var App = React.createClass({

  getInitialState: function () {
    return {
      message: 'Hello World!'
    };
  },
  toggleMenu: function () {
    console.log('clicked hamburger'); //<-- This is never fired
    this.refs.menu.toggle();
  },

    render: function() {
        var menuItems = [{ route: 'get-started', text: 'Get Started' }];
        return (
<div>
    <AppBar onMenuIconButtonTouchTap = {this.toggleMenu}  title = "Hej" />
    <LeftNav ref = "menu" docked = {false}  menuItems = {menuItems} />
</div>
        );
    }

});

module.exports = App;

The full code example can be checked out from here: https://github.com/oskbor/lunch-mirror

Happy for any suggestions on what Im doing wrong!

• javascript
• reactjs
• touch-event
• material-ui

1 Answer 1

So, I was not able to determine why this is the cause, but I think the problem is how you are splitting your build into 2 separate files.

If I change up your GulpFile to exclude the building of vendors.js and remove the line

appBundler.external(options.development ? dependencies : []);

it will build a single js file with all the dependencies in it and everything works as expected.

My theory on why:

When you remove the dependencies from the main.js bundle, the main bundle ends up including just what it needs, which includes just the small pieces of React that the tap-event plugin needs. react/lib/SyntheticUIEvent, etc. So, those small pieces get patched to include the touchTap events.

But, in the vendors bundle, you have the full React, which is what you require in your app. This is not patched to include the touchTap events, so no touchTap event was ever actually getting fired, because the React that you were including was not properly getting patched.