New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

onClick broken on iOS. #134

Closed
leebyron opened this Issue Jun 28, 2013 · 19 comments

Comments

Projects
None yet
@leebyron
Contributor

leebyron commented Jun 28, 2013

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

This comment has been minimized.

Show comment
Hide comment
@yungsters

yungsters Jun 28, 2013

Contributor

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

Contributor

yungsters commented Jun 28, 2013

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

@leebyron

This comment has been minimized.

Show comment
Hide comment
@leebyron

leebyron Jun 28, 2013

Contributor

I think it affects modern iOS browsers as well.

Contributor

leebyron commented Jun 28, 2013

I think it affects modern iOS browsers as well.

@leebyron

This comment has been minimized.

Show comment
Hide comment
@leebyron

leebyron Jun 28, 2013

Contributor

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

Contributor

leebyron commented Jun 28, 2013

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

@vjeux

This comment has been minimized.

Show comment
Hide comment
@vjeux

vjeux Jun 28, 2013

Contributor

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.

Contributor

vjeux commented Jun 28, 2013

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

This comment has been minimized.

Show comment
Hide comment
@rboyce

rboyce Jun 28, 2013

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

rboyce commented Jun 28, 2013

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

@tomocchino

This comment has been minimized.

Show comment
Hide comment
@tomocchino

tomocchino Aug 14, 2013

Contributor

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

Contributor

tomocchino commented Aug 14, 2013

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

@ewendel

This comment has been minimized.

Show comment
Hide comment
@ewendel

ewendel May 15, 2014

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

ewendel commented May 15, 2014

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

@sophiebits

This comment has been minimized.

Show comment
Hide comment
@sophiebits

sophiebits May 15, 2014

Member

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

Member

sophiebits commented May 15, 2014

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

@mietek

This comment has been minimized.

Show comment
Hide comment
@mietek

mietek Jul 26, 2015

This is still an issue in 0.13.3.

mietek commented Jul 26, 2015

This is still an issue in 0.13.3.

@sophiebits

This comment has been minimized.

Show comment
Hide comment
@sophiebits

sophiebits Jul 26, 2015

Member

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

Member

sophiebits commented Jul 26, 2015

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

@shuson

This comment has been minimized.

Show comment
Hide comment
@shuson

shuson Sep 1, 2015

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.

shuson commented Sep 1, 2015

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

This comment has been minimized.

Show comment
Hide comment
@yagudaev

yagudaev Sep 8, 2015

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.

yagudaev commented Sep 8, 2015

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

This comment has been minimized.

Show comment
Hide comment
@sophiebits

sophiebits Sep 8, 2015

Member

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

Member

sophiebits commented Sep 8, 2015

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

@uzarubin

This comment has been minimized.

Show comment
Hide comment
@uzarubin

uzarubin Oct 13, 2015

Contributor

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?

Contributor

uzarubin commented Oct 13, 2015

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

This comment has been minimized.

Show comment
Hide comment
@sophiebits

sophiebits Oct 13, 2015

Member

@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.

Member

sophiebits commented Oct 13, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@melbayad

melbayad Oct 14, 2015

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 ?

melbayad commented Oct 14, 2015

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 comment has been minimized.

Show comment
Hide comment
@sophiebits

sophiebits Oct 14, 2015

Member

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.

Member

sophiebits commented Oct 14, 2015

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.

knowuh added a commit to concord-consortium/rigse that referenced this issue Oct 16, 2015

entrepreneurj added a commit to entrepreneurj/delay-explorer-web that referenced this issue Oct 30, 2015

Enables react interaciton on iOS
- Apparently iOS only lets a user click on anchor tags by default
- Solution found at facebook/react#134
- has been fixed in REact 0.14 (apparently).
@tiaaaa123

This comment has been minimized.

Show comment
Hide comment
@tiaaaa123

tiaaaa123 Sep 21, 2016

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....

tiaaaa123 commented Sep 21, 2016

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

This comment has been minimized.

Show comment
Hide comment
@stresslimit

stresslimit Feb 11, 2017

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

stresslimit commented Feb 11, 2017

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

@facebook facebook locked and limited conversation to collaborators Feb 11, 2017

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.