Material-ui: Buttons not always triggering click events on Safari and Firefox

[jtulkki2]

Description

It seems that buttons (at least RaisedButton, possibly other buttons and other elements) do not always trigger click events on Safari and Firefox. This happens when the button is clicked outside of the label near the border of the button. Also this happens only when the button is clicked for the first time or if enough time (a few seconds) has passed between the clicks.

This bug is present in the latest material-ui version 0.16.4. The bug also exists on the Material UI home page.

The problem is probably caused by a bug (or feature) in the browsers, and is related to the ripple effect. I believe that adding the element for the ripple effect on the mouse down event somehow causes the click event not be triggered. This could possibly be fixed by setting pointer-events: none for the ripple effect element style.

Link to minimally-working code that reproduces the issue

Click near the border of the GITHUB button at the bottom of the Material-UI home page at:

http://www.material-ui.com/

For some reason the DEMO button works correctly.

Versions

• Browser: Firefox 49.0.2 and Safari 9.1.1 on OS X

[jtulkki2]

I found a hot fix using the following css:

button > div > span, a > div > span {
    pointer-events: none;
}

A real fix can be done by adding the following style definition to the file material-ui/internal/TouchRipple.js at line 265 (for version 0.16.4):

var mergedStyles = (0, _simpleAssign2.default)({
          height: '100%',
          width: '100%',
          position: 'absolute',
          top: 0,
          left: 0,
          overflow: 'hidden',
          pointerEvents: "none" <--- addition
        }, style);