search

JakeSidSmith / react-fastclick

Fast Touch Events for React
https://www.npmjs.com/package/react-fastclick
MIT License
487 stars 41 forks source link

Click event propagates to a wrong element #29

Closed Elijen closed 7 years ago

Elijen commented 8 years ago

When user clicks an element that causes re-render (e.g. react-route change) element that appears after the re-render right under the tapped position receives a click event too.

JakeSidSmith commented 8 years ago

That surprises me, had an issue with this a while ago, but I thought it had been fixed. Can I get some more info from you?

What router are you using? What elements / components are causing the issue? (the one clicked to change route, and the second element that a click is triggered on) What version of React are you using?

Elijen commented 8 years ago

Router: react-router + react-router-redux Elements: button (changes route) -> textarea (probably same with input) react: v15.1.0 react-dom: v15.1.0 react-fastclick: v2.1.1

JakeSidSmith commented 8 years ago

Hmmm, this is very odd (as it does seem like a bug I've already fixed). I've just pushed some changes to fix a warning / bug in React 15 to #31.

Would you be able to try your project with that branch and see if it fixes your problem?

JakeSidSmith commented 8 years ago

@Elijen Did you get a chance to try with the branch mentioned above?

eaardal commented 8 years ago

Hi. We're seeing the same issue in our solution but only on older devices, specifically Android 4.2.2 and older. We're using an HTC One X to re-produce the issue. Hope this can be of help in tracking this down.

rahulinaction commented 8 years ago

I am using react 0.14 and this issue still persists.This occurs on IOS 9.3 . I am implementing this in a cordova application.

qimingfang commented 8 years ago

@rahulinaction i ran into the same problem as you. Looked into it a bit today, and submitted a PR for a fix that solves my problem. Take a look and see if it solves your problem too?

https://github.com/JakeSidSmith/react-fastclick/pull/33

JakeSidSmith commented 8 years ago

Is everyone experiencing this issue using react-router?

Could I get some more info from some of you. :)

  1. On what element did you click?
  2. Is this a react component? (is it your component, or a third party)
  3. What element is the event also triggered on?
  4. Is this a react component? (is it your component, or a third party)
  5. How did the event get triggered on another element? (was the first removed, or hidden, or moved?)
qimingfang commented 8 years ago

I'm not using react router. I'm using a pretty simple custom redux based router.

  1. button
  2. just ordinary <button>
  3. another button, at the same spot on the next screen
  4. just ordinary <button>
  5. the second screen transitioned in from the right hand side in ~200ms
JakeSidSmith commented 8 years ago

I can't reproduce this. :/ Does the second button have an onClick or is it a submit button?

Alternatively, has anyone got time to setup a little example repo that I can work on?

cvbuelow commented 8 years ago

I am also experiencing this issue, and using react-router. I fixed by using a <button onClick={}> instead of <a onClick={}>

rahulinaction commented 8 years ago

Can we ensure that we can exclude fast click for certain elements for example removing fast click support for select elements . Is there a way where in I exclude fast click for specific elements

Elijen commented 8 years ago

@JakeSidSmith Sorry for late reply. I actually stopped using react-fastclick because I found out the original FastClick library works just fine with React and offers much more robust solution. It's surprisingly hard to implement this right (many cross-element, cross-browser and cross-platform differences).

We were experiencing a similar problem in AngularJS. The root of the issue was the fact that an element used for a Selector condition check was removed from DOM (page re-rendered because of route change) so matchesSelector check failed. I suspect it could be something similar here.

rahulinaction commented 8 years ago

@JakeSidSmith You will be able to replicate this issue mostly in mobiles. If you create a form with input fields and selectboxes randomly adding 2 input fields followed by 2 select input you might be able to replicate it. I for the timebeing disabled fastclick for the input fields and the select.

JakeSidSmith commented 7 years ago

Anyone still using react-fastclick and react-router, could you try the alpha version I've just released and let me know if it's fixed your issue. :)

https://github.com/JakeSidSmith/react-fastclick/pull/50