Material-ui: [Appbar] onLeftIconButtonTouchTap event doesn't fire

[juanda99]

When I click on the element AppBar, _left icon_, _handleClick() method should execute.
However it's not fired so I can't get console message.

    import React, { Component } from 'react'
    import { AppBar, IconButton } from 'material-ui'
    import MoreVertIcon from 'material-ui/lib/svg-icons/navigation/more-vert';

    let injectTapEventPlugin = require("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();


    class Header extends Component {
      constructor(props) {
        super(props);
        this._handleClick = this._handleClick.bind(this);
      }

      _handleClick(e) {
        e.preventDefault();
        // Show/Hide the LeftMenu
        window.console.log("Click!");
      }

      render() {
           return (
            <AppBar title="Arasaaccc"
                    iconElementLeft={ <IconButton>
                                        <MoreVertIcon/>
                                      </IconButton> }
                    onLeftIconButtonTouchTap={ this._handleClick }
                    isInitiallyOpen={ true } />


          )
      }
    }

    export default Header


However it works with another component (not my fault with es6 that I'm just learning):

    class Prueba extends Component {
      constructor(props) {
        super(props);
        this._handleClick = this._handleClick.bind(this);
      }

      _handleClick(e) {
        e.preventDefault();
        window.console.log("Click!");
      }
      render (){
        return (
          <h1 onClick={this._handleClick}>Prueba Prueba Prueba</h1>
          )
      }
    }
    export default Prueba;

Just updated material-ui, just in case, to version 0.14.0-rc1

[zachguo]

It seems that both onLeftIconButtonTouchTap and onRightIconButtonTouchTap won't fire when using custom IconButtons, I have to use IconButton's onClick event instead. I'm not sure whether this is intended.

[juanda99]

With the following snippet: onTitleTouchTap event is being fired.
However onLeftIconButtonTouchTap is not being fired, although not using a custom IconButton.

 <AppBar title="Arasaaccc" onTitleTouchTap={ this._handleClick }
                iconElementLeft={ <IconButton iconClassName="muidocs-icon-custom-github" tooltip="GitHub"/>  }
                onLeftIconButtonTouchTap={ this._handleClick }
                isInitiallyOpen={ true } />

[zachguo]

I think you ARE using a custom left icon. I can confirm onLeftIconButtonTouchTap is working if there's no iconElementLeft specified.

However this is a thing need to be either fixed or documented.

[alitaheri]

Well this is somehow by design. if AppBar adds it's own IconButton (when you provide a className not a component) it attaches a handler, otherwise you will have to attach the handler yourself. in other words:

<AppBar 
  title="Arasaaccc"
  onTitleTouchTap={ this._handleClick }
  iconElementLeft={ 
    <IconButton  
      iconClassName="muidocs-icon-custom-github" 
      onTouchTap={ this._handleClick }
      tooltip="GitHub"/>  
  }
  isInitiallyOpen={ true } />

[alitaheri]

But I guess we have to either deprecate iconClassNameLeft or document this. Thanks for reporting it.

[oliviertassinari]

I think that we should remove those touchTab event properties at some point.
It would be better to use a composable approach.

[alitaheri]

@oliviertassinari Couldn't agree more.

[lancecarlson]

What's the latest on this issue? I just bumped into this and didn't see anything about it in the docs. I was able to get around it using the onTouchTap event on the IconButton (should I be using onClick instead?). If that is the recommended route, it should be documented at the very least.

[oliviertassinari]

That issue should be solved now. The onLeftIconButtonTouchTap callback will be triggered if there is no onTouchTap property on the iconElementLeft node.