Repository navigation
[bug] select and multi-select is wrong on (IOS mobile, and tablet devices - Safari, Chrome, Firefox, Opera, Edge) #2244
Description
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"
SJS.ipad.mp4
iPad.mp4
"iPhone on Firefox"
SJS.iphone.mov
iPhone.mp4
Desctop - everything works as expected
Desctop.mp4
SJS.desctop.mp4
If you have a question please feel free to ask: kholub1989@gmail.com
Versions:
sortablejs = ^1.15.0
Activity
[-][bug] select and multi-select is wrong on (IOS mobile, and tablet devices) (Safari, Chrome, Firefox, Opera, Edge)[/-][+][bug] select and multi-select is wrong on (IOS mobile, and tablet devices - Safari, Chrome, Firefox, Opera, Edge)[/+]kholub1989 commentedon Jan 14, 2023
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 commentedon Jan 16, 2023
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)a0e160a
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 commentedon Nov 28, 2024
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.#2244: Allow supportPointer to be enabled by default for IOS
owen-m1 commentedon Nov 28, 2024
It should be fixed in 1.15.6, supportPointer will now default to
trueon IOS.This bug will still be there if
supportPointer: falseis set in the options, another fix will be needed for that.[Snyk] Upgrade sortablejs from 1.15.3 to 1.15.6 (#11)
JDavidVR commentedon May 30, 2025
Hi, I'm facing same issue on iPad device: https://github.com/user-attachments/assets/6a4da4c7-fa5a-4616-b883-f1d4ed86633f
I'm using v1.15.6 of library.
aphillips8 commentedon Mar 18, 2026
I was having issues with iPad not working. This is because it's looking for iOS devices but the iPad user agent doesn't include 'iPad', so it's incorrectly treated as desktop Safari.
Changing this line (1113) fixed it for me:
supportPointer: Sortable.supportPointer !== false && 'PointerEvent' in window && (!Safari || IOS),to:
supportPointer: Sortable.supportPointer !== false && 'PointerEvent' in window && (!Safari || ('ontouchstart' in window || navigator.maxTouchPoints > 0)),This updates it to look for touch devices instead of iOS devices.
owen-m1 commentedon Mar 19, 2026
@JDavidVR @aphillips8 Thanks for looking into this! You could also just specify
supportPointer: truein the sortable's options, since line 1113 is simply the default value for this option.aphillips8 commentedon Mar 20, 2026
@owen-m1 No problem, thanks for the reply! I initially did just try
supportPointer: truebut I noticed some minor issues in desktop Safari where sometimes when dragging an item it would highlight/select the background instead of starting the drag. (This was much improved when using the above fix instead becausesupportPointer: falseremains the default value for desktop Safari).