[bug] select and multi-select is wrong on (IOS mobile, and tablet devices - Safari, Chrome, Firefox, Opera, Edge)

[kholub1989]

Describe the bug Unable to select the element, on IOS mobile and Tablet devices.

To Reproduce Steps to reproduce the behavior:

When I click on an element it is immediately select and deselect. This weird functionality behaves on multiple IOS mobile, and tablet devices. I think that something odd happening with the event handlers because when I change the view from IOS mobile or tablet to desktop, everything starts to work, because a different event fires.

touchend to mouseup

Browser compatibility for the SortableJS event: touchend https://developer.mozilla.org/en-US/docs/Web/API/Element/touchend_event#browser_compatibility https://caniuse.com/?search=touchend

FYI - Currently, all desktop browsers work correctly. and this bug behaves on all Sortable JS projects! Please follow the screenshots and videos for more information.

Expected behavior When I click on the element, I always want to have a functionality to select and deselect (On\Off).

Information Sortable options: dataIdAttr: "data-did", multiDrag: true, sort: true, handle: ".did-handle", selectedClass: "selected", fallbackTolerance: 3, forceFallback: true, fallbackClass: "sortable-fallback", animation: 200, dragoverBubble: false, ghostClass: "ghost",

Few different wrong examples in simulators "iPad on Chrome"

https://user-images.githubusercontent.com/25338200/210939811-705e1210-93ea-4732-b5e8-32e2c4630205.mp4

https://user-images.githubusercontent.com/25338200/210939818-300b9753-f111-40ce-a5e6-049810c87b40.mp4

"iPhone on Firefox"

https://user-images.githubusercontent.com/25338200/210940208-b58479cf-4ff0-4c1e-a724-9da4169de07e.mov

https://user-images.githubusercontent.com/25338200/210933819-5d6df4b2-65d9-4ae1-bdc5-3f4efc5e742e.mp4

Desctop - everything works as expected

https://user-images.githubusercontent.com/25338200/210933783-ff68a252-e376-4e04-b755-37be31c78e21.mp4

https://user-images.githubusercontent.com/25338200/210937169-231a0de9-ab4d-4100-8f70-a1d47c1c33b4.mp4

If you have a question please feel free to ask: kholub1989@gmail.com Versions: sortablejs = ^1.15.0

[kholub1989]

I did a little research and found the problematic part of the code. As expected it is the two events ("mousedown", "touchstart") with are attached and fire same time on all browsers of the IOS touchscreen devices.

At the moment I'm not sure if the events are wrong or if the PointerEvent ("supportPointer") conditional statements, or the devices and browsers detection.

or

Currently, I do not have any solutions or workarounds! If someone has any idea how to solve it, please don't hesitate!

[kholub1989]

Okay, I am referencing my bug to the past issue, which was slowed by disabling pointer events in all Safari browsers. (#1571: Dont use pointer events in Safari)https://github.com/SortableJS/Sortable/commit/a0e160a5189cdbb09a6e310413a2e4e719be6323

At the moment, it looks like Safari is fixed this bug (Safari 13+), if we remove the ("!Safari") from the supportPointer variable conditional check, everything will work as expected.

supportPointer: Sortable.supportPointer !== false && ('PointerEvent' in window)

[owen-m1]

The original bug that this is meant to fix still exists in Safari surprisingly, but it's only there for native drag&drop, so it doesn't appear on IOS (it might just not occur on IOS Safari anyways). I will add a change to make sure this is not disabled by default in IOS.

Either way, what you are seeing is just the default for this setting. You can modify it in the options with supportPointer: true.

[owen-m1]

It should be fixed in 1.15.6, supportPointer will now default to true on IOS. This bug will still be there if supportPointer: false is set in the options, another fix will be needed for that.