LeftNav doesn't play with iOS fullscreen mode

[0x80]

<meta name="apple-mobile-web-app-capable" content="yes">

This meta tag would allow iOS to display the app in fullscreen after using the "add to homescreen" feature in Safari. I found that by doing this I can't use the LeftNav component anymore, because it closes immediately after opening. I'm not able to hit any or the menu links.

[notduncansmith]

Reproduced this in Phonegap. It looks like it's the onTouchTap function: I can't reproduce the behavior if I use onClick instead.

My code for reference:

menuItems = [
  {route: '/foo', text: 'Foo'}
  {route: '/bar', text: 'Bar'}
]

App = React.createClass
  toggleMenu: ->
    @refs.nav.toggle()

  closeIfOpen: ->
    if @refs.nav.state.open
      @refs.nav.close()

  render: ->
    div {onTouchTap: @closeIfOpen},
      (UI.LeftNav {menuItems, docked: false, ref: 'nav'}),
      (UI.RaisedButton {label: 'Default', onTouchTap: @toggleMenu})

[notduncansmith]

Okay, well I figured out my problem.

So, I had added the closeIfOpen method so that the user could click anywhere to close the menu. Only thing is, I forgot to call e.preventDefault(). This meant the event was bubbling up to the main div, closing it instantly.

@0x80 if you have something like that in your code, maybe that's the problem.

[0x80]

I have no idea what changed in my app, but I can't reproduce it anymore. The LeftNav seems to be working ok for me now.

[pomerantsev]

I am able to consistently reproduce this problem, both in a webview using Cordova, and using the "Add to Home Screen" feature.
Here's the full reproduction code (which is very similar to @notduncansmith's, but without the closeIfOpen bit):

let React = require('react'),
    MUI = require('material-ui');

require('react-tap-event-plugin')();

let App = React.createClass({

  render () {
    let menuItems = [{ text: 'Menu item' }];

    return (
      <div>
        <MUI.LeftNav ref="leftNav"
                     menuItems={menuItems}
                     docked={false} />
        <div onTouchTap={this.onMenuToggleTouchTap}>
          Toggle menu
        </div>
      </div>
    );
  },

  onMenuToggleTouchTap () {
    this.refs.leftNav.toggle();
  }

});

React.render(<App />, document.body);

The problem is that a menu item reacts to a click event which happens after the nav is opened.
Not sure why it doesn't happen in standard browser mode in iOS though (not full-screen).
I will submit a PR fixing this shortly.