Material-ui: Safari Bug - form submission doesn't work on Flatbutton

[charles-tai]

Found a weird bug with FlatButton in safari. The code looks something like this:

fire ()  { console.log('firing')}

<form onSubmit={fire}>
  <FlatButton type="submit"> Submit </FlatButton>
</form>

FlatButton requires double click for the onSubmit handler to fire.

Update: looks like touch tap works but clicking doesn't work.

[charles-tai]

Looks like this might be the same issue as:
https://github.com/callemall/material-ui/issues/1370

[hai-cea]

@charosez Can you please confirm that this was fixed with v0.10.4?

[charles-tai]

@hai-cea Thanks for checking in. Unfortunately, it's still broken even with the v0.10.4 update.

[hai-cea]

@charosez I've confirmed that this problem still exists on v0.10.4, but seems to have been fixed on master. I plan to do a release of v0.11 in the next few days and we can check this out again.

[charles-tai]

@hai-cea The bug still exists in the v0.11 update. This time, the button only registers if you click on the span area of the button. If you click anywhere outside of the span area (the edges of the button), it doesn't register. This issue exists in Safari. Works fine in Chrome and Firefox.

[xiamike]

Same symptom is appearing for me, I'm on
"material-ui": "^0.12.3",
"react": "^0.13.3"

Will look into it a bit more ...

[xiamike]

Do you think the double-tap code is interfering?

if you single click very slowly (like after ripple subsides) it won't register the click regardless of how many clicks.
Only if you click twice within a short enough time-span will it fire the click handler.

[dspnorman]

Experiencing the same issue, also seeing single clicks fail to register in Safari. Double clicks, even slow double clicks with up to 2 seconds between, work.

"material-ui": "^0.12.3",
"react": "^0.13.3"

[yarcub]

Hi.

I've experienced the same behaviour described by @dspnorman in Safari 9.0.1. Works fine in Chrome/Firefox.

if you single click very slowly (like after ripple subsides) it won't register the click regardless of how many clicks.

Only if you click twice within a short enough time-span will it fire the click handler.

My project dependencies are

"material-ui": "^0.13.2"
"react": "^0.14.2",

Disabling the ripple effect, the click works has expected. I think that somehow could be related with it.

  <IconButton style={{height:'50px', width:'50px', position: 'absolute', right: '10px'}}
                  tooltip={'Dial'}
                  tooltipPosition='bottom-left'
                  disableFocusRipple={true}
                  disableTouchRipple={true}
                  onClick={this.handleClick}
                  >
        <CallIcon />
      </IconButton>

[ptim]

I'm seeing this on all my flat and raised buttons in safari 9.0.1 and:

    "material-ui": "^0.14.0-rc2",
    "react": "^0.14.0",

[panamantis]

disableFocusRipple fixed the extra click requirement for firefox on windows. Happens on my href="/" redirection (separately from onClick).
Seems to only happen when I've added an icon to the button. So yeah, seems like a 'child' click-through/visibility issue.

[ptim]

Thanks for the tipz; I've upgraded to

"material-ui": "^0.14.3",

and Safari 9.0.3, and can't reproduce the issue if I set

disableTouchRipple={true}

I've been testing with a couple of RaisedButtons and I notice that the 'control' button (disableTouchRipple property is not specified) requires a second click maybe 40% of the time, whilst the new improved disableTouchRipple={true} button never fails...

[thomasmery]

Hi,

"material-ui": "0.14.4"
_Safari 9.0.2_

I can confirm the issue with FloatingActionButton : onClick hander only triggers ... sometimes

disableTouchRipple={true} seems to fix the problem

[donaldpipowitch]

I use RaisedButton inside a form. A click on RaisedButton or focusing RaisedButton and pressing enter will not result in submitting the form. This happens for me on Chrome. I use React 0.14.7 and martial-ui 0.15.0-alpha.1.

[cgwyllie]

Possibly related to https://github.com/callemall/material-ui/issues/2568 ? There are a few similar issues that seem to be related to TouchRipple effects.

[McKean]

using onMouseUp or onMouseDown instead of onClick will work on Safari. Of course that's only a workaround but might help for now.

[nathanmarks]

This is the same as #4421

[eyerean]

Adding disableTouchRipple={true} and/or disableFocusRipple={true} still doesn't fix the issue for me in Safari, v.9.1 .
I'm on

"material-ui": "0.15.0",
"react": "15.1.0"

Issue is present in RaisedButton inside forms with type="submit", so no onTouchTap or onClick events manually added.

[ClaudiuBadau]

While disabling the ripple might be a workaround we would still like for the ripple to work.

Random testing on our project showed that when you have a RaisedButton or FlatButton with a label you have to click the label in order for it to work. If you don't nothing happens as you can see below.

However when we have buttons with just icons and no label this still exists and you will have to double/triple click which is what everyone else seems to be experiencing.

Edit: more investigation with this it seems like onTouchTap works fine instead of onClick.

[telemakhos]

@ClaudiuBadau solution works for us too... onTouchTap will do the trick

[oliviertassinari]

We have been porting the component on the next branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.