rafgraph / react-interactive

Better hover, active and focus states than CSS pseudo-classes, and a callback when the interactive state changes.
https://react-interactive.rafgraph.dev
MIT License
167 stars 8 forks source link

Tap actions invoke onClick with clickType = `reset` #9

Closed sdob closed 3 years ago

sdob commented 6 years ago

We're using react-interactive (which is brilliant, by the way — thanks!) to invoke different behaviour in our app depending on whether the user mouse-clicks on an element or taps on it. According to my understanding of the documentation, it should be possible to do this by inspecting the clickType argument passed to the click handler, which should be one of mouseClick, tapClick, or keyClick.

What we're experiencing, however, is that when you tap an <Interactive /> element, onClick is called with clickType='reset'. This isn't documented but appears to be the default clickType.

I've created a minimal React app to reproduce this: the code containing the handler is here:

https://github.com/sdob/react-interactive-test/blob/308548f7a5f6aa70f6f12c192f2483efbc6f276d/src/App.js

Am I doing something wrong here, or is this a bug?

rafgraph commented 6 years ago

The code looks fine. I'm not able to reproduce this. What device and browser are you using?

On the example site I have a state logger which prints the clickType when the button is clicked/tapped. Does it print out click - reset for you? The code for the example is here: https://github.com/rafrex/react-interactive/blob/gh-pages/src/components/StateLogExample.js#L88

img_0449

sdob commented 6 years ago

Thanks for the response! This is very weird. Your example works fine for me (i.e., it correctly reports a tap as a tapClick). However, I've deployed my MWE here and it is reporting clickType as reset if targeted with a tap device (details below). Can you take a look?

What device and browser are you using?

I can reproduce the problem on my MWE using Chrome 70 for Android 7.0 and with responsive device emulation in Chrome 68 and Firefox 62 (under Ubuntu 16.04), but the resulting issue in our app has been reported by a presumably diverse base of Chrome/Firefox users.[1]

I've cloned this repo, built the gh-pages branch, and run it locally, and that works fine too. I wonder if this could be a problem with one of the dependencies, where our app is building with a different minor/patch version. Does this seem plausible?

I'm going to dig further into this; if you have any guidance/advice on what might be causing this then that would be helpful.

[1] The details of the problem are fairly app-specific, but for the sake of completeness: because we can't get react-interactive to report taps as tapClick we resorted to treating reset as a proxy when we need to treat taps and clicks differently; this workaround interferes with some other stuff we do where we want to simulate mouse clicks with HTMLElement.click(). (I don't think the precise details of what we're trying to achieve are relevant but I'll happily go into more detail if you think they might be.)

rafgraph commented 3 years ago

@sdob if you're still having this issue, try using Event From and pass in the click event. It should give you the correct input type. I'm going to rewrite React Interactive from the ground up in TypeScript with a simpler API/fewer features (it will use Event From under the hood).

rafgraph commented 3 years ago

@sdob v1 is in pre-release. You can install it with the next tag npm i --save react-interactive@next

rafgraph commented 3 years ago

v1 released 🎉