Click event won't fire on click on iOS devices but works as intended on desktop - ios

Question

I am having trouble having my React application to work optimally on mobile Safari. My app will PUT, POST, PATCH, and DELETE normally on desktop but won't do so on my iPhone. I've tried adding "cursor:pointer" and onTouchStart to my React component below but nothing seems to be doing the trick.
onSubmit(event) {
const name = this.state.name;
const instructor = cookies.get('instructor')._id;
this.setState({
submitted: true,
});
this.props.dispatch(actions.editCourse(name,this.props.match.params.cuid));
}
render() {
if (this.state.submitted) {
window.location.href = `https://young-mountain-65748.herokuapp.com /courses/${this.props.match.params.cuid}`;
}
return (
<div className="container">
<div className="field-line">
<label htmlFor="coursename">New Course Name:</label>
<input
id="coursename"
name="coursename"
value={this.state.name}
onChange={this.updateName}
/>
</div>
</div>
<div className="edit-course-buttons">
<button
className="edit-course"
onClick={this.onSubmit}
onTouchStart={this.onSubmit}>
Edit Course
</button>
</div>
</div>
);
}
}

Answer 1

I too had the same issue on iOS devices. Was able to get over these by replacing onClick with touch events. Check this documentation on touch events in ReactJS. You may use onTouchStart instead of onClick and see if it works! So your button should look like this:
<button onTouchStart="{this.onSubmit}" onclick = "void(0)" ...>
</button>
I have added onClick as suggested in an accepted answer here.
https://facebook.github.io/react/docs/events.html#touch-events
Check the similar question, as per the answer most voted you need to use touchevent and add cursor: pointer; css to elemnt you have click event associated with.