Material-ui: Firefox onClick not working in button

Created on 19 Dec 2018 · 4Comments · Source: mui-org/material-ui

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!

ButtonBase question

Source

michaelgriffithus

Most helpful comment

@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.

oliviertassinari on 19 Dec 2018

👍3

All 4 comments

@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.

oliviertassinari on 19 Dec 2018

👍3

Thank you @oliviertassinari

michaelgriffithus on 20 Dec 2018

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
Screenshot 2020-11-11 232219