[IconMenu] Multiple IconMenus opened on iPhone

[mtojek]

Problem description

I have created a Drawer with two buttons. Every button open an IconMenu. Buttons are place vertically in the distance of 300px. Google Chrome: if I click the button A, the IconMenu related to A will open. If then click button B, the IconMenu A will disappear and IconMenu B will appear.
Unfortunately this will not behave the same on iPhone 5s browser. The A IconMenu won't be hidden.

It seems to be an issue with the only event.preventDefault() invocation in IconMenu.js. Removing this method fixes the problem of two opened menus, but it allows for event bubbling of buttons.

Steps to reproduce

1. Easy to reproduce - turn on iPhone 5S emulation in Chrome Developer Tools.
2. Create two Lists.
3. Every List will contain one ListItem
4. Every ListItem will have a property "rightIconButton" defined.
5. The "rightIconButton" property will be an IconMenu which will have simple "iconButtonElement" defined.

Versions

• Material-UI: 0.15.0
• React: 15.1.0
• Browser: iPhone 5S

[mtojek]

If you need a sample code I can ask you to visit the site:
http://www.material-ui.com/#/components/list

Example: Messages List

Turn on Chrome Developer Tools, enable iPhone 5S emulation i tried to click the triple dots icons to open few IconMenus.

[JoshuaJeme]

I got the same problem, too.

http://www.material-ui.com/#/components/icon-menu

[mtojek]

I don't think that contributors will fix the bug quickly.

[GabiAxel]

I also reproduced this bug on Chrome/Mac, Safari/Mac, Chrome/Android and Opera/Android.

Worked fine on Firefox/Mac+Android and Opera/Android.

[ArthurKnaus]

We are currently working on a large scale web application and it is really annoying that we can't get the Icon Menu to work properly on mobile devices.
I sincerely hope that contributors will soon fix the bug.

[oliviertassinari]

We have been removing the IconMenu component on the v1-beta branch. We are now encouraging people to use lower level components: the IconButton and Menu component:

  return (
      <div>
        <IconButton
          aria-label="More"
          aria-owns="long-menu"
          aria-haspopup="true"
          onClick={this.handleClick}
        >
          <MoreVertIcon />
        </IconButton>
        <Menu
          id="long-menu"
          anchorEl={this.state.anchorEl}
          open={this.state.open}
          onRequestClose={this.handleRequestClose}
          style={{ maxHeight: ITEM_HEIGHT * 4.5 }}
          MenuListProps={{
            style: {
              width: 200,
            },
          }}
        >
          {options.map(option =>
            <MenuItem key={option} selected={option === 'Pyxis'} onClick={this.handleRequestClose}>
              {option}
            </MenuItem>,
          )}
        </Menu>
      </div>
    );

Hence, I'm closing it. Still, we will accept PR fixes until v1-beta takes over the master branch.