Material-ui: AppBar onRightIconTouchTap not firing

[e-monson]

Problem Description

I'm trying to place a burger menu on the right side of an AppBar that toggles a LeftNav when clicked. However, my onRightIconButtonTouchTap event handler doesn't seem to fire at all. Here's the relevant code:

var Burger = require('material-ui/lib/svg-icons/navigation/menu');

.
.
.

<AppBar
   iconElementLeft={ myLogo }
   iconElementRight={ <IconButton><Burger/></IconButton> }
   onRightIconButtonTouchTap={ this._toggleNav }
/>

Versions

• Material-UI: 0.14.4
• React: 0.14.0
• Browser: Chrome 49.0.2623.87

[rs6g10]

Hey, following works:

<AppBar
    title="Title"
    iconClassNameRight="muidocs-icon-navigation-expand-more"
    onRightIconButtonTouchTap={ this._toggleNav }
  />

[rs6g10]

This is by design. the onRightIconButtonTouchTap fires in when you have the iconClassNameRight. But if you have iconElementRight then better handle the _toggleNav event on onClick of the button or in your case MenuItem.
below is the example:

<AppBar
          ref='appBar'
          title='My Title'
          onLeftIconButtonTouchTap={() => this.showSideNav()}
          iconElementRight={
                          <IconMenu
                            iconButtonElement={<IconButton name='menu'><MoreVertIcon /></IconButton>}
                            targetOrigin={{horizontal: 'right', vertical: 'top'}}
                            anchorOrigin={{horizontal: 'right', vertical: 'top'}}>
                            <MenuItem name='about' primaryText='About' />
                            <MenuItem name='help' primaryText='Help' />
                            {this.props.isAuthenticated ?
                            <MenuItem name='logout' primaryText='Logout' onClick={() => this.props.dispatch(logoutAndRedirect())} />
                            : ''}
                          </IconMenu>}
        />

[mbrookes]

Thanks @rs6g10

[e-monson]

Yes, thank you! This worked for me.

[marcelorl]

<AppBar
    title="Title"
    iconClassNameRight="muidocs-icon-navigation-expand-more"
    onRightIconButtonTouchTap={ this._toggleNav }
  />

It doesnt work for me.

But if I change the event to onTitleTouchTap it works fine.

How can I make it work with onRightIconButtonTouchTap

Thanks.

[lucasbento]

@marcelorl: are you injecting react-tap-event-plugin (https://github.com/callemall/material-ui/issues/5208#issuecomment-247860938)?

[marcelorl]

Hi. Yes, I am.

That's the whole code i'm trying to run.

import React from 'react';
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import messages from './messages';

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

export default class DashboardPage extends React.Component { // eslint-disable-line react/prefer-stateless-function

  constructor(props) {
    super(props);

    injectTapEventPlugin();

    this.state = {sidebar: false};
  }

  _handleToggle = () => this.setState({sidebar: !this.state.sidebar});

  render() {
    return (
      <div>
        <AppBar
          title="Title"
          iconClassNameRight="muidocs-icon-navigation-expand-more"
          onTitleTouchTap={ this._handleToggle }
        />
        <Drawer
          docked={false}
          width={200}
          open={this.state.sidebar}
          onRequestChange={(sidebar) => this.setState({sidebar})}
        >
          <MenuItem onTouchTap={this.handleToggle}>Menu Item</MenuItem>
        </Drawer>
      </div>
    );
  }
}

• There's no console errors.
• The AppBar is showing up fine.
• If I change sidebar state to true, the drawer will display fine as well.
• If I move the action to onTitleTouchTap (just to test), it works fine.

Anybody has a simple working example with this right click event?

Thanks.

[lucasbento]

@marcelorl: can you try moving injectTapEventPlugin() outside of constructor() function?

Here is a working bin using a stateless component: http://www.webpackbin.com/NJ7gLNmCW.

[marcelorl]

Same issue, nothing happens.

I saw your example and no log triggers when clicking in the right icon.
http://www.webpackbin.com/VJ0VaDm0W

But it triggers with the title click.

[lucasbento]

That's really odd, works okay here:

@marcelorl: what's your browser and its version?

[marcelorl]

Ok, I have no idea what happened, probably cache.

But I just tried to run it again and it strangely worked.

Sorry for taking your time.
Thanks a lot @lucasbento

[lucasbento]

@marcelorl: no problem, I'm glad it worked!