Firefox onClick not working in button

[michaelgriffithus]

I have a simple react application that is using Material-UI components. The application menu drawer doesn't appear in FF 60.4 but works fine in Chrome.

If I change the state of the drawer in the developers toolbox the drawer appears. Its like the menu icon onClick event handler isn't firing: https://codesandbox.io/s/wo29099yvl

Any help would be appreciated, thanks in advance!

[oliviertassinari]

@michaelgriffithus Move the onClick listener from the SVG to the icon button.
It seems to be an issue with Firefox. Here is a simpler reproduction:

import React from 'react';

class NavDrawer extends React.Component {
  render() {
    return (
      <button>
        <svg
          onClick={() => {
            console.log('wtf');
          }}
        >
          <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
        </svg>
      </button>
    );
  }
}

export default NavDrawer;

The matter was also discussed in https://stackoverflow.com/questions/26402033/missing-click-event-for-span-inside-button-element-on-firefox.

[michaelgriffithus]

Thank you @oliviertassinari

[tonyjara]

Warning still showing up and this is no longer a problem in FF, is there a way to mute this warning? Im on Material UI Core 4.11

[oliviertassinari]

@tonyjara See #22804 for why it's still relevant. The description of the warning was changed in v5.

[jpfiorilla]

Hello, I am on this error page because I am attempting to add a callback to MUI Autocomplete's closeIcon, eg:

<Autocomplete closeIcon={<Close fontSize="small" onClick={onClear} />} />

Wrapping the <Close /> in an IconButton informs me that I am putting a button inside another button. Autocomplete's onClose refers to a different function and is not related to the closeIcon.

Is there any way to add a callback to the CloseIcon?