MenuItems sporadically do not work - child component onClick not working

Hi all,

First of all thank you for this framework! I have been using it for my project and I have the following issue. I have a Menu component with MenuItems. The MenuItems have children, which have an onClick handler. When I click the menu and click an item fast, sometimes the onClick event just not works. Sometimes it does, sometimes it doesn’t.

Code example:

<Menu key={2}
                      id="menu-appbar"
                      anchorEl={anchorEl}
                      anchorOrigin={{
                        vertical: "top",
                        horizontal: "left"
                      }}
                      transformOrigin={{
                        vertical: "top",
                        horizontal: "left"
                      }}
                      open={open}
                    >
                      <MenuItem
                          onClick={() => {
                            console.log("works");
                            this.handleCloseMenu();
                        }}
                      > 
                         <div onClick={() => {console.log("I sometimes don't work")}} Click </div>
                      </MenuItem>
</Menu>

I tried removing the clickhandler at MenuItem and it still does not work. I note that the click handler in the MenuItem always seems to work, just not of its children. I use create-react-app 16.2, chrome browser.

Really hoping you can help me out. Thanks!

[jamaldewitte]

But shouldn’t an event bubble from inwards to outwards? Shouldn’t the event handler in the div at least always be called?

Sorry about the questions. I’m still learning so I may very well be doing something wrong, but also spend a lot of hours trying to fix this so really would like to have a solution for this.

[kgregory]

Questions like this should be posted on StackOverflow. I was unable to reproduce your behavior with the code snippet provided, see this codesandbox.

I’m going to close this issue. If you revisit your example and can identify a problem with material-ui, please re-open this issue and provide the appropriate information.