[Menu][NestedMenuItem] Nested menu item onTouchTap/onClick doesn't work.

[niba]

Problem Description

OnTouchTap event doesn't fire after clicking menu item. I've also tried onClick without success. I've react tap event plugin.

In your code I found these lines:

if (menuItems) {
  childMenuPopover = (
      <Popover
          anchorOrigin={{horizontal: 'right', vertical: 'top'}}
          anchorEl={this.state.anchorEl}
          open={this.state.open}
          useLayerForClickAway={false}
          onRequestClose={this._onRequestClose}
      >
        <Menu desktop={desktop} disabled={disabled} style={nestedMenuStyle}>
          {React.Children.map(menuItems, this._cloneMenuItem)}
        </Menu>
      </Popover>
  );
  other.onTouchTap = this._onTouchTap;
}

It's a fragment from menu-item.jsx. It's weird that you only attach onTouchTap when menu item has nested menu items. Is it ok? I tried to hack it with attaching an empty array of menu items but it also didn't help. Don't know why.

Update:

What is even worse this is non deterministic behaviour. When I put some breakpoints in the following function

  _cloneMenuItem(item) {
    return React.cloneElement(item, {
      onTouchTap: (event) => {
        if (!item.props.menuItems) {
          this._onRequestClose();
        }

        if (item.props.onTouchTap) {
          item.props.onTouchTap(event);
        }
      },
      onRequestClose: this._onRequestClose,
    });
  },

onTouchTap works. Without breakpoints it doesn't fire.

Update 2

I've found what is responsible for those problems. The ClickAwayListener thinks that nested menu is not a descendant of menu and fires onClickAway event which breaks somehow onClick event.
With commented this one line

if (document.documentElement.contains(event.target) && !isDescendant(el, event.target)) {
    // _this.props.onClickAway(event);
}

everything started working. That change broke Popover (can't hide on click away) but didn't break Menu which now is working perfect (still hides on click away, dunno why).

Versions

• Material-UI: 0.15.0-alpha.1
• React: 0.14.6
• Browser: Chrome 48.0.2564.116

[antialiasis]

I'm also having this problem. It's pretty serious; it completely breaks the menu.

[newoga]

@niba @antialiasis Sorry, first time seeing this issue. Thanks for the analysis/thorough description. We've actually been tracking this issue here: #3818, and have a PR open with the fix here: #3947. It's slated to be fixed before our 0.15.0 release. I'll close this (even though you opened it up first). Thanks much!