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