Skip to content
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

Jump to bottom

onClick broken on iOS. #134

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

onClick broken on iOS. #134

leebyron opened this issue Jun 28, 2013 · 19 comments

Comments

@leebyron
Copy link
Contributor

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
Copy link
Contributor

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

@leebyron
Copy link
Contributor Author

I think it affects modern iOS browsers as well.

@leebyron
Copy link
Contributor Author

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

@vjeux
Copy link
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
Copy link

rboyce commented Jun 28, 2013

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

@tomocchino
Copy link
Contributor

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

@zpao zpao closed this as completed Aug 14, 2013
@mietek mietek mentioned this issue Mar 23, 2014
Closed
@ewendel
Copy link

ewendel commented May 15, 2014

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

@sophiebits
Copy link
Collaborator

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

@yulinyeh yulinyeh mentioned this issue Sep 27, 2014
Closed
@jkrentz jkrentz mentioned this issue Apr 28, 2015
Closed
callum pushed a commit to callum/racko that referenced this issue May 13, 2015
Fix iOS onClick issue
d9a7e7c 
facebook/react#134
This was referenced Jul 10, 2015
Merged
Merged
@mietek
Copy link

mietek commented Jul 26, 2015

This is still an issue in 0.13.3.

@sophiebits
Copy link
Collaborator

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

@bassjacob bassjacob mentioned this issue Aug 12, 2015
Merged
@shuson
Copy link

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
Copy link

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
Copy link
Collaborator

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

@jwarning jwarning mentioned this issue Sep 9, 2015
Closed
@uzarubin
Copy link

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
Copy link
Collaborator

@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
Copy link

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
Copy link
Collaborator

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
@knowuh
Add cursor: pointer; trick to get clickable bins for React < 0.14
f3b3889 
@see facebook/react#134
@knowuh knowuh mentioned this issue Oct 16, 2015
Merged
entrepreneurj added a commit to entrepreneurj/delay-explorer-web that referenced this issue Oct 30, 2015
@entrepreneurj
Enables react interaciton on iOS
146cd52 
- 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).
@entrepreneurj entrepreneurj mentioned this issue Oct 30, 2015
Merged
@pmchung pmchung mentioned this issue Jun 5, 2016
Open
@braker1nine braker1nine mentioned this issue Sep 19, 2016
Merged
@NickColley NickColley mentioned this issue Sep 20, 2016
Closed
@tiaaaa123
Copy link

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

@yenici yenici mentioned this issue Oct 6, 2016
Open
@stresslimit
Copy link

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.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests