Material-ui: All Buttons requires double click to trigger click event

[luisrudge]

Problem description

When using any button component, safari only triggers the click event when I double click a button

Example

Here's my custom component:

const LinkedAction = () => (
  <FlatButton onClick={() => { alert('foo'); }}>
     Do Something
  </FlatButton>
);

Versions

• Material-UI: 0.15.1
• React: 15.0.1
• Browser: safari 9 and saafari 9.1 tech preview

[luisrudge]

@aahan96 I updated the title and description, since this happens with all buttons, even when not using <Link />

[luisrudge]

If I replace onClick by onTouchTap, it works as expected (first click)

const LinkedAction = () => (
  <FlatButton onTouchTap={() => { alert('foo'); }}>
     Do Something
  </FlatButton>
);

[luisrudge]

Why did you close this? This should work with onClick as a normal button does. Using onTouchTap is kind of a hack.

[mbrookes]

Why did you close this?

Because you figured out what you were doing wrong. 😄

[aahan96]

@luisrudge It is similar to the issue #4421. onClick doesn't work properly on Safari. It is not a MUI bug. There have been many posts regarding this issue. That's why onTouchTap is preferred on Safari. Most of the people have to do this work around

[luisrudge]

@mbrookes I'm not doing anything wrong. onClick is simply not working with MUI buttons.

[luisrudge]

@aahan96 well, onClick works great with the native <button /> component. How come this is not a MUI bug?

[ffxsam]

I came here to report the same issue, I just noticed this in Safari.

I've been wanting to phase out onTouchTap since the 200(?) millisecond delay after a tap is no longer an issue on mobile devices. It shouldn't take two clicks on (in my particular case) an IconButton to trigger an onClick. And I second what @luisrudge pointed out, this is _not_ a Safari issue. This React code properly dumps text to the console:

<div onClick={() => console.log('works fine')}>
  Click this thing
</div>

So it seems to be a MUI bug.

[riseremi]

Are there any news about this?
I've encountered the same bug in both Firefox (49.0.2) and Safari (10.0.1).

[Nathan-Wall]

Same here. Can we reopen this issue? Why is this closed?

[elburge1]

Yeah I'm running into this now on Google Chrome as well. Can we reopen this?

[sovanna]

You can try with onMouseUp or onTouchTap, it should avoid this bug.

plus, IMHO, It's more appropriate than onClick cause when you use onMouseUp, the event is fired only if user release the mouse over the button's zone which allow him to cancel his action just by releasing outside the button, UX things.

_But onClick still need to be fixed_

[riseremi]

@sovanna thank you for the tip! I will use onMouseUp for now, but yeah, it will be nice to have onClick fixed.

Btw, maybe we can try to contribute and fix it by ourselves?

[sovanna]

yep @riseremi, we can try :)

[gmaclennan]

It would be good to re-open this as an issue that still needs to be fixed, encouraging others to step in and offer a PR. I feel that if you add an onClick function to a component, then it should be called when that component is clicked, consistently in all browsers.

[Floriferous]

Still not functioning as expected, should we open a new issue?

[timothyallan]

Just started running into this, do I really have to refactor everything for desktop + mobile Safari to use onTouchTap? Sigh.

[mbrookes]

@timothyallan It is in the docs: http://www.material-ui.com/#/get-started/installation, and unless you're using notepad or textedit, your editor should have global search-and-replace:

[Shift-Command-R] (or whatever)
Find: onClick
Replace with: onTouchTap
[Replace All]

Blam! 💥 Done. 🚀

onTouchTap goes away in next. 🎉

[timothyallan]

Cool, thanks @mbrookes That's much nicer than saying RTFM :) Global search/replace isn't going to fly with this project unfortunately, so I'll start hunting them down... and then swap them back out after the tap event dependancy is removed!

[stevematdavies]

I have this issue in Chrome also. onTouchTap is not an acceptable fix, as its avoiding the issue. If its a regular html button element its fine, but wrapping it in a React Component seems to cause the errors.

[ffxsam]

Is onTouchTap still needed at this point?

[oozorataiyou]

@ffxsam it works without the onTouchTap.
I am testing it on the latest beta of High Sierra's Safari

[max-arias]

I'm getting some errors even with onTouchTap, a modal opens/closes, had to use onMouseUp

[stevematdavies]

I also confirm the issue in all browsers with latest MUI on React 16, onTouchTap, onClick, and onMouseUpdo not fix it.

[sebastianferrari]

Any news on this?

[tex1337]

I found a solution to many of the issues with my mdl components (getmdl.io) was to simply review my usage of event.preventDefault() and to add:

componentDidUpdate(){
        try{
            window.componentHandler.upgradeDom();
        } catch (err) {
            console.warn('Attempted upgrade of DOM before ready!');
        }
    }

To any presentation component to restore the default JS behaviour.

[timothyallan]

The only way I can get consistent click behavior in Chrome, still, with Material UI 3.5.1 is to use onMouseUp on all my buttons. onClick requires 2 clicks.

[skur42]

I just used onMouseDown in React. It worked perfectly.

[IsmaelTerreno]

I just used onMouseDown in React. It worked perfectly.

Same for me thanks for the workaround.

[riteshjagga]

We had the double-click issue in Firefox browser but only when used along with a screen reader (NVDA) for accessibility. Posting a solution because it looked related.

onMouseDown and onMouseUp are not really solutions from accessibility point of view as buttons can then not be triggered using Enter and Space keys.

We found that the issue is with onClick and changing it to onTouchTap solves the issue but then creates another issue where button's action cannot be triggered AGAIN when used with Enter key. For example, button opens a dialog upon Enter/Space key press, dialog closes down and then button is not available for Enter/Space key press.

We checked that this issue happens because of React Tap Event plugin which is not required from v0.19.0 (and onwards I believe). I just checked it till 0.19.0. So upgrading to this version should solve the issue.

react-tap-event-plugin is used till Material UI v0.18.7 and is not used in Material UI v0.19.0

[riteshjagga]

I just used onMouseDown in React. It worked perfectly.

You'll loose keyboard accessibility with this event.

[null93]

It seems like this issue went away for me once I set the disableRipple attribute.

[mmotamimi]

I have a theory:

if you click the button after clicking on anywhere in the screen... this issue does not happen
and it mainly happens with me in the login screen and forms.

based on it, I think that the issue is NOT in the button ... it's in the input fields. is seems to have some sort of built-in clickAway listener that when you do your first click, it captures the click.

I'm working on finding a workaround for this bug. if I find something better than what's above, I will update this comment

[narendrasinghrathore]

Facing same in chrome.

Is it something related when we are using the form ( using react-hook-form, the handler on onSubmit), because I have the same type=" button" i.e. cancel button which works fine on a single click, but when clicking on type="submit" button, it had to click twice.
Note: it's Dialog Component in which I am using this form.

[narendrasinghrathore]

Facing same in chrome.

Is it something related when we are using the form ( using react-hook-form, the handler on onSubmit), because I have the same type=" button" i.e. cancel button which works fine on a single click, but when clicking on type="submit" button, it had to click twice.
Note: it's Dialog Component in which I am using this form.

Working on a single click as expected.

My Issue.
I had to remove an extra validation which in result to extra click.
Because of react-hook-form API formState.isValid, it returns false on first submit and true on second click even if the form is valid on first.

All good!!!