search

facebook / react

The library for web and native user interfaces.
https://react.dev
MIT License
228.51k stars 46.76k forks source link

Bug: onClick handler not called on mobile Safari / iPhone #21533

Closed rohankeskar19 closed 3 years ago

rohankeskar19 commented 3 years ago

React version: 17.0.2

Steps To Reproduce

  1. Add onClick event to any element
  2. Test that onClick is working on mobile device

Link to code example:

The current behavior

onClick event is not firing on mobile devices, I already tried the cursor: pointer fix, But it is still not working

The expected behavior

onClick event should get fired on all devices

bvaughn commented 3 years ago

@rohankeskar19 Please share a Code Sandbox (or a GitHub project) that shows the broken behavior and please specify which types of devices you've tested and seen this behavior on.

For example, I just tried this sandbox on my Pixel (Android) and it worked fine: https://codesandbox.io/s/nice-margulis-zlmxh?file=/src/App.js

rohankeskar19 commented 3 years ago

https://codesandbox.io/s/ancient-wood-76y53, This is the code sandbox, and the device I'm trying is iphone, It is also not working in the dev tools of chrome

ShroXd commented 3 years ago

it works fine on my Safair/iPhone11 (14.4.2), maybe it's a bug on iPhone

rohankeskar19 commented 3 years ago

it works fine on my Safair/iPhone11 (14.4.2), maybe it's a bug on iPhone

Can you try this site - https://www.notealy.com and click on the nav buttons then try it on desktop, those buttons are supposed to scroll to the section

bvaughn commented 3 years ago

Have you confirmed that they're not scrolling specifically because the click handler isn't called? Or could it be something else (CSS or animation code)

rohankeskar19 commented 3 years ago

I have confirmed that the scrolling is working, It works on desktop as well as the mobile mode in the browser but when I try it on actual device it doesn't work

bvaughn commented 3 years ago

How have you confirmed that the click handler is not being called? (Considering a small repro like I posted above shows that click handlers do get called on mobile.)

OleksiiMarchenk0 commented 3 years ago

Hello, @rohankeskar19 . Please share your problematic code (maybe link etc.)? In the meantime please see my code here Implementing onClick in React which can fix this bug. I checked it and on my iPhone 8, this code works. :)

todortotev commented 3 years ago

Works on iPhone 12 pro as well.

Rodanus commented 3 years ago

@rohankeskar19 What causes this problem is CSS. I've recorded this video to show you what's happening. I hope it explains the reason behind this behavior well.

Edit: here is a YT link in case the quality isn't that good here: https://youtu.be/gsCAApUDykc

https://user-images.githubusercontent.com/40541141/121196304-0840e200-c879-11eb-8ee8-25578541b6bb.mp4

bvaughn commented 3 years ago

Seems like this problem is not a React bug so I'm going to close the issue. Thanks for looking into this and sharing what you've found, @Rodanus