onClick broken on iOS.

[leebyron]

iOS Safari really doesn't want you clicking anything that's not an <a> tag. This is a known issue: http://stackoverflow.com/questions/5421659/html-label-command-doesnt-work-in-iphone-browser/6472181#6472181

The way you fix this is by putting an empty "onclick" attribute on nodes you wish to emit click events. Yep.

So presumably:

div({onClick: function(){alert('clicked');}}, 'click me');

should emit:

<div onclick>click me</div>

on iOS. Ensuring that the click event is actually reachable from an iOS device.

As the stack overflow link points out, this is also an issue for <label> elements associated with <input> elements. In order to behave as a clickable label, they must also include an empty "onclick" attribute.

label(null, input({type: 'checkbox'}), check me);
<label onclick><input type="checkbox> check me</label>

[yungsters]

Is this only an issue with iOS4 and below? Can we just generate markup for every node with onclick="" on the affected browsers?

[leebyron]

I think it affects modern iOS browsers as well.

[leebyron]

style="cursor:pointer" also fixes this :)

[vjeux]

Does it only happens for onClick or also for onTouchStart, onDblClick ...?

Does attaching an onClick event listener to the dom node fixes the issue?

Christopher "vjeux" Chedeau
Facebook Engineer
http://blog.vjeux.com/

On Jun 27, 2013, at 10:45 PM, Lee Byron notifications@github.com wrote:

style="cursor:pointer" also fixes this :)

—
Reply to this email directly or view it on GitHub.

[rboyce]

* {cursor: pointer;} is the least offensive way to do this, IMO

[tomocchino]

I think this is fixed now, right @zpao @yungsters?

[ewendel]

Still not fixed, I just spent an hour trying to figure out why this wasnt working..

[sophiebits]

Sorry about that -- we have #1169 open now.

[mietek]

This is still an issue in 0.13.3.

[sophiebits]

It's fixed in 0.14 beta and will be in the final 0.14 as well.

[shuson]

The <a> without href attribute but with onClick event doing the navigation is not working across all kinds of browsers in iOS platform. (I test 4 of them in iOS 8.4.1 :)
But if we put a styling cursor:pointer for <a>, it will bypass iOS' restriction of the press and hold copy and paste text mechanics.

[yagudaev]

Just had the same problem with an onClick event on an overlay that was suppose to dismiss a menu when clicked or tapped. Changing the style to cursor: pointer like @shuson said worked, but it shouldn't be required.

[sophiebits]

As I said, this is fixed in 0.14 which will be released soon.

[uzarubin]

We are currently having this issue only on iOS 9. The workarounds work for other versions of iOS, just not the most recent one. Is anyone else experiencing this?

[sophiebits]

@uzarubin Haven't heard of this. I just tested with http://react.jsbin.com/vovuzexiza/edit?html,js (http://react.jsbin.com/vovuzexiza) and it seems to work fine.

[melbayad]

I'm currently using React v0.14.0 and still have the same issue (event click not firing) on Safari v8.0.6 and IE. I've added cursor:pointer but with no luck. can you please help me to make it work ?

[sophiebits]

This issue has been fixed. If you're seeing the wrong behavior from React still, please open a new issue with a minimal repro case.

[tiaaaa123]

react: 15.1.0 Still not working. I have the cursor: pointer as you can see. I tried onTouchStart, onTouchTap and onClick but none is happening.

alert('hi')} onTouchTap={() => alert('hi')} onClick={() => alert('hi')} style={{ padding: '16px', color: 'black', fontSize: '25px', cursor: 'pointer' }}> Click me!

When I'm on my website on an IPad and and my laptop the click on the IPad does nothing on the IPad, but it does on PC! The even seems to be triggered, but nothing is displayed on IPad....

[stresslimit]

I love that this was still relevant to me today, thank you internet archives!