react: onClick broken on iOS.
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>
About this issue
- Original URL
- State: closed
- Created 11 years ago
- Comments: 19 (5 by maintainers)
Commits related to this issue
- Fix iOS onClick issue https://github.com/facebook/react/issues/134 — committed to callum/racko by deleted user 9 years ago
- Add `cursor: pointer; trick` to get clickable bins for React < 0.14 @see https://github.com/facebook/react/issues/134 — committed to concord-consortium/rigse by knowuh 9 years ago
- Enables react interaciton on iOS - Apparently iOS only lets a user click on anchor tags by default - Solution found at https://github.com/facebook/react/issues/134 - has been fixed in REact 0.14 (appa... — committed to entrepreneurj/delay-explorer-web by entrepreneurj 9 years ago
* {cursor: pointer;}is the least offensive way to do this, IMO
<div onTouchStart={() => alert('hi')} onTouchTap={() => alert('hi')} onClick={() => alert('hi')} style={{ padding: '16px', color: 'black', fontSize: '25px', cursor: 'pointer' }}> Click me! </div>react: 15.1.0Still not working. I have the cursor: pointer as you can see. I triedonTouchStart,onTouchTapandonClickbut none is happening.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…