-
-
Notifications
You must be signed in to change notification settings - Fork 331
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[slider] cannot move slider using mouse on iPad #1988
Comments
The iPad still gets recognized as a touch device, thus the mouse events are not bound (which the trackpad/mouse would trigger) . Without being able to test this myself, this is most probably the reason. |
I imagine there may be a similar issue for other devices, like a Windows laptop that has a touchscreen, if this is the case? Presumably would be the same on Android if pairing a Bluetooth mouse - I’d test this, but have no Bluetooth mouse |
I can confirm the same behavior on several Android devices using a OTG adapter and USB mouse. This is also true for dropdowns. |
The issue is caused by the distinction between touch and non-touch devices (see slider.js, line 239): On touch devices, only (!) touch events are handled, on non-touch devices (only) mouse events are handled. I'm currently not sure why the code does this distinction at all. Instead it could only bind to mouse events and rely on the (typically very good) mouse event emulation of the web browsers. I don't see any touch specific functionality, which requires the touch event handlers. So IMHO, the trivial solution would be removing this whole distinction and all the touch event binding code. |
The touch events are needed, otherwise real mobile devices do not trigger the mousedown/enter/leave events (which are complained by this issue) and the slider wont work at all on (real) mobile devices. I dont have an ipad nor a touchscreen notebook to test this myself. But we cannot purely rely on the desktop browser mobile view emulation. |
Unfortunately, not all of the events are always added (Sorry, my fault, I pointed to the wrong line): The
This is not quite right. As I mentioned above, (mobile and desktop) web browsers have a built-in mouse emulation that triggers some mouse events along with touch events (see this MDN article) – as long as this is not prevented by
I can reproduce the issue on my Android smartphone with a Bluetooth mouse connected. |
I propose to
Touch-tapping on the slide track would be handled through the click event emulation, mouse dragging would continue to work (other than in my approach in the PR). |
This fixes fomantic#1988 (mouse interaction on touch devices) but disables dragging the slider via touch input. Touch-tapping for slider positioning still works through browsers' mouse event emulation. Touch-dragging will be re-added in a modified form in a later commit.
Fixed by #2327 |
As proposed in #1988, I did a rework of the touch event handling of the slider component. The new touch event code does not prevent mouse input (fixes [slider] cannot move slider using mouse on iPad #1988) tracks Touch identifier to avoid confusion by other fingers on the touch screen handles touchcancel events in a sensible way does no dynamic binding and unbinding to all touch events on the page. In combination with the second point, this enables multitouch sliding of multiple sliders on the same page (I know, nobody asked for this, but it works. ;) ) – Unfortunately, multitouch sliding of the first and second thumb of the same slider is not easy to implement due global state within each slider module. only binds to touchstart events on the .thumb element to avoid accidential sliding while scrolling the page on a mobile device (obsoletes [slider] Add option to disable touch-/mouse-sliding on the track #1987) The last point can be considered a disadvantage/regression compared to the old code, if you consider touch-sliding anywhere on the slider as a feature. However, in my experience, it's really annoying to change a slider position (which has immediate real-world effects in my home automation software) when scrolling the page and accidentially hitting a slider. Using the mouse, one can still slide the slider anywhere on its track.
Bug Report
It appears that when using a mouse (in my case a trackpad) on an iPad, the slider cannot not move when trying to either drag the slider along not when clicking at a position along the slider. At least, this appears to be the case when using iPad OS 14.6. When touching the screen, the slider works as expected
Steps to reproduce
Expected result
Slider slides
Actual result
Slider does not slide
Version
2.8.7
The text was updated successfully, but these errors were encountered: