onClick on mobile not fired

[taddei]

I have put together a test case that replicates the issue:

https://github.com/taddei/react-bug-test

On desktop browsers the click handler is triggered correctly, the same code on iOS mobile devices (tested both on simulator and actual devices) does not fire the event. Works fine on android.

[waldreiter]

Can you try adding cursor:'pointer' to the css style of the element that you want to click?

[taddei]

http://www.quirksmode.org/blog/archives/2010/10/click_event_del_1.html

[taddei]

Now, the strange thing is ...
While I was trying to debug this I used a workaround. On componentDidMount I attached a native event listener to the this.getDOMNode() element and removed the listener on componentWillUnmount.
Without the cursor:pointer class on iOS it worked perfectly.

[syranide]

@taddei Yeah, that's "expected", React attaches event listeners to the document. iOS doesn't fire click events for nodes (at all) unless they seem "clickable" (i.e., has a click event listener or cursor: pointer).

[sophiebits]

See #1169.

[pke]

Adding the cursor: pointer style does not seem to fix this on iOS9 Have to use "react-tappable" to get the clicks recognized instantly

[sophiebits]

This should have been fixed in 0.14 already.

[pke]

It isn't. I'm on 0.14.7

[joshjhargreaves]

Any updates on this?

[sophiebits]

This is closed which indicates no one is looking at it.

But http://react.jsbin.com/mimovoluci uses React 15 and works on my iPhone. Can someone post an example that is broken?

[pke]

@spicyj by "works on my iPhone" you mean the click is instantly recognized? There is no touch delay?

[sophiebits]

Oh, I totally misunderstood you. It is expected that you get the same click delay as any other onclick handler. The bug that this was tracking is that clicks didn't work at all on iOS. You have to use something like react-tappable that listens to touch events or a script like fastclick.

[pke]

@spicyj yeah, I am using react-tappable for that reason. Though react brings something with it by now, to get rid of react-tappable

[brunogarcia]

@spicyj I've tried the example from jsbin, but doesn't work in Safari 9.0.
By the way on Chrome 51.0.2 works perfectly.
Both tested into an iPad 9.1.

[elonmuscedo]

I am using React 15, and this works everywhere but iphone 4, ios 8. I tried buttons, a tag but cant that click to run a function.

[AustinSpinazze]

This appears to be broken again in v16 React. I have tried the cursor pointer fix and it still does not fire correctly. I have to resort to using both onClick and onTouchStart.

[gaearon]

Please file a new issue if you see a new problem. Issues from 2014 aren't actively monitored and the reasons are likely different.

[pke]

but why Dan? This issue shows the history of the problem. Creating a new one just fragments issue for no reason (except that this one here is old).

[thusinh1969]

It is annoying really ! It is simply stop accepting click for whatever reason ! Is that because Apple want everyone on app ?

Steve

[rickhanlonii]

Hey all, I'm going to lock this because I'm worried comments for this will be missed, or that people may pattern match this issue with a new issues which is very likely to have a different cause. If you're seeing issues related to onClick not firing, please submit a new issue with a full reproduction in a codesandbox.