search

ten1seven / what-input

A global utility for tracking the current input method (mouse/pointer, keyboard or touch).
https://ten1seven.github.io/what-input
MIT License
1.35k stars 89 forks source link

"mouse"-State on mobile devices #88

Closed alexanderjakob closed 5 years ago

alexanderjakob commented 5 years ago

whtainput-mobile

Today I got the following state back after alerting whatInput.ask() - but I was on my mobile device. I was getting this by switching between different input fields (click in one input switch to another).

Version: 5.1.2

ten1seven commented 5 years ago

Hi @aj1991, can you give me some details about the mobile device you are using?

mihkeleidast commented 5 years ago

we're facing issues as well with the last versions of iOS Safari reporting mouse input and intent.

we were able to reproduce this on the official demo page.

ten1seven commented 5 years ago

Hi @risker, I was able to reproduce this only through rapid tapping. I think I solved it by increasing a timer that prevents the mousedown event from being reported. Can you try the version in this branch https://github.com/ten1seven/what-input/tree/touch-buffering and let me know if that works for you?

mihkeleidast commented 5 years ago

It still pretty regularly reports mouse. I wouldn't call it "rapid tapping", most often it reports mouse after a longer tap - when you don't take your finger off the screen immediately, it mostly reports "mouse", not "touch".

ten1seven commented 5 years ago

Well... apparently I found and fixed an unreported bug then 😄

I'll keep looking. What device (hardware) are you seeing this on? Newer hardware has the 3D Press that can take over a longer tap (though a long tap is also possible, of course).

mihkeleidast commented 5 years ago

Currently i was testing this on a few years old iPad mini, but could also reproduce this on my colleague's iPhone 7, for example.

edit: I wonder if we could do a window.matchMedia('(hover: hover), (any-hover: hover)').matches check inside the mouse event handlers & bail if that check does not match? i'll try to test this out on different devices tomorrow that have both touch & mouse support.

ten1seven commented 5 years ago

I have yet to be able to reproduce this. I've been testing on the demo page (and to be clear, the touch-buffering branch has not been deployed there). I tried my physical iPhone 8 as well as the Xcode simulator. If there's any way you could take a video of how you're reproducing it, I'd appreciate it.

shanholmes commented 5 years ago

We are experiencing the same behaviour with CSS selectors. We are targeting page elements with the CSS selector [data-whatintent='mouse'] . We are then seeing these styles being applied when pressing on mobile devices.

Edit: Specifically ios. Works fine on Android.

ten1seven commented 5 years ago

Thanks, @shanholmes I have a bit of time to check this out this week!

ten1seven commented 5 years ago

I was finally able to spend some time with this and reproduce the issue! I have a pre-release for you all to check out. Please try it out if you're able and let me know if the issue is corrected for you (or if you uncover any regressions). Thanks!

Pre-release: https://github.com/ten1seven/what-input/releases/tag/v5.2.0

Branch: https://github.com/ten1seven/what-input/tree/88-ios-mouse-reporting

ten1seven commented 5 years ago

I did a bunch of testing on my end and no longer could reproduce the issue. Here's the official release: https://github.com/ten1seven/what-input/releases/tag/v5.2.1

shanholmes commented 5 years ago

Forgot to say, it fixed our issues too. Thanks for the awesome work!

ten1seven commented 5 years ago

Great, thanks for the follow-up!