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

onClick on mobile not fired #2055

Closed
taddei opened this issue Aug 16, 2014 · 15 comments

Comments

Projects
None yet
8 participants
@taddei
Copy link

commented Aug 16, 2014

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.

@cody

This comment has been minimized.

Copy link
Contributor

commented Aug 16, 2014

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

@taddei

This comment has been minimized.

@taddei taddei closed this Aug 16, 2014

@taddei

This comment has been minimized.

Copy link
Author

commented Aug 16, 2014

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

This comment has been minimized.

Copy link
Contributor

commented Aug 17, 2014

@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

This comment has been minimized.

Copy link
Collaborator

commented Aug 18, 2014

See #1169.

raorao added a commit to raorao/groceries that referenced this issue Jan 10, 2015

raorao added a commit to raorao/groceries that referenced this issue Jan 11, 2015

@pke

This comment has been minimized.

Copy link

commented Mar 11, 2016

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

Copy link
Collaborator

commented Mar 11, 2016

This should have been fixed in 0.14 already.

@sophiebits sophiebits reopened this Mar 11, 2016

@sophiebits sophiebits closed this Mar 11, 2016

@pke

This comment has been minimized.

Copy link

commented Mar 11, 2016

It isn't. I'm on 0.14.7

@joshjhargreaves

This comment has been minimized.

Copy link

commented May 25, 2016

Any updates on this?

@sophiebits

This comment has been minimized.

Copy link
Collaborator

commented May 26, 2016

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

This comment has been minimized.

Copy link

commented May 26, 2016

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

@sophiebits

This comment has been minimized.

Copy link
Collaborator

commented May 26, 2016

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

This comment has been minimized.

Copy link

commented May 26, 2016

@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

This comment has been minimized.

Copy link

commented Jul 6, 2016

@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

This comment has been minimized.

Copy link

commented Aug 12, 2016

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.