[slider] cannot move slider using mouse on iPad

[jamessampford]

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

1. Try adjusting any slider on https://fomantic-ui.com/modules/slider.html

Expected result

Slider slides

Actual result

Slider does not slide

Version

2.8.7

[lubber-de]

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.

[jamessampford]

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

[Warzulus]

I can confirm the same behavior on several Android devices using a OTG adapter and USB mouse. This is also true for dropdowns.
#1989

[mhthies]

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.

[lubber-de]

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.
The mouse events are added all the time, that's why i can only guess, that the mobile browsers somehow do not detect an attached mouse (and wont trigger the mouse events)

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.

[mhthies]

The mouse events are added all the time, that's why i can only guess, that the mobile browsers somehow do not detect an attached mouse (and wont trigger the mouse events)

Unfortunately, not all of the events are always added (Sorry, my fault, I pointed to the wrong line): The mousedown event is always added (even on touch devices), but the mousemove and mouseup events are only added on non-touch devices, see line 280 And I would guess, that's the cause of the issue.

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.

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 event.preventDefault() during the touch event handling. However, I just noticed that his seems to only support "tap" events (click/mousedown→mouseup), no dragging (mousemove) – at least in Google Chrome on Android. So for dragging support, the touch events actually need be handled explicitly.

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.

I can reproduce the issue on my Android smartphone with a Bluetooth mouse connected.
I also tested hardcoding module.is.touch = false, which resulted in working mouse interaction but broken touch dragging on my Android smartphone – which is expected, based on my thoughts above.

[mhthies]

I propose to

• remove the distinction between touch and non-touch devices
• remove the current touch handling
• add new touch handling, only listening for touchdown events on the handle (.thumb ) to allow dragging the handle on touch devices without the accidential dragging issue (which I tried to tackle in [slider] Add option to disable touch-/mouse-sliding on the track #1987)

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).