[bug] select and multi-select is wrong on (IOS mobile, and tablet devices - Safari, Chrome, Firefox, Opera, Edge) #2244
Comments
kholub1989
changed the title
|
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.
Currently, I do not have any solutions or workarounds! If someone has any idea how to solve it, please don't hesitate! |
|
Okay, I am referencing my bug to the past issue, which was slowed by disabling pointer events in all Safari browsers.
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.
|
|
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). Either way, what you are seeing is just the default for this setting. You can modify it in the options with |
owen-m1
added a commit
that referenced
this issue
Nov 28, 2024
|
It should be fixed in 1.15.6, supportPointer will now default to |
newkdr
added a commit
to newkdr/vscode-gitlens
that referenced
this issue
Dec 24, 2024
 <h3>Snyk has created this PR to upgrade sortablejs from 1.15.3 to 1.15.6.</h3> :information_source: Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project. <hr/> - The recommended version is **3 versions** ahead of your current version. - The recommended version was released **25 days ago**. <details> <summary><b>Release notes</b></summary> <br/> <details> <summary>Package name: <b>sortablejs</b></summary> <ul> <li> <b>1.15.6</b> - <a href="https://redirect.github.com/SortableJS/Sortable/releases/tag/1.15.6">2024-11-28</a></br><ul> <li>Restore pervious text clearing selection behaviour on fallback-enabled sortable lists. Text should be cleared whenever mouse is down on a sortable item, but text inputs within items should still be interactable</li> <li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1521940212" data-permission-text="Title is private" data-url="SortableJS/Sortable#2244" data-hovercard-type="issue" data-hovercard-url="/SortableJS/Sortable/issues/2244/hovercard" href="https://redirect.github.com/SortableJS/Sortable/issues/2244">#2244</a>: Fix issue where multi-drag selection doesn't work on IOS devices</li> </ul> </li> <li> <b>1.15.5</b> - <a href="https://redirect.github.com/SortableJS/Sortable/releases/tag/1.15.5">2024-11-27</a></br><ul> <li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2692375294" data-permission-text="Title is private" data-url="SortableJS/Sortable#2410" data-hovercard-type="issue" data-hovercard-url="/SortableJS/Sortable/issues/2410/hovercard" href="https://redirect.github.com/SortableJS/Sortable/issues/2410">#2410</a>: Further improvements to handling of text selection during drag, to allow text inputs to continue to function within sortable items. Removed the previous <code>nextTick</code> solution which caused text inputs to be noninteractive, and instead have moved the text selection clearing to the actual drag start.</li> </ul> </li> <li> <b>1.15.4</b> - <a href="https://redirect.github.com/SortableJS/Sortable/releases/tag/1.15.4">2024-11-24</a></br><ul> <li>Fix issue where text selection occurs during dragging when fallback is enabled</li> <li>Improved support for pointer events</li> <li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="692108553" data-permission-text="Title is private" data-url="SortableJS/Sortable#1897" data-hovercard-type="issue" data-hovercard-url="/SortableJS/Sortable/issues/1897/hovercard" href="https://redirect.github.com/SortableJS/Sortable/issues/1897">#1897</a>: [MultiDrag] Prevent multi-select of non-draggable and filtered items</li> </ul> </li> <li> <b>1.15.3</b> - <a href="https://redirect.github.com/SortableJS/Sortable/releases/tag/1.15.3">2024-09-01</a></br><ul> <li>Expose <code>expando</code> value in <code>Sortable.utils</code></li> <li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2134996369" data-permission-text="Title is private" data-url="SortableJS/Sortable#2346" data-hovercard-type="issue" data-hovercard-url="/SortableJS/Sortable/issues/2346/hovercard" href="https://redirect.github.com/SortableJS/Sortable/issues/2346">#2346</a>: Fix inability to drag in fallback when handle has a shadowRoot</li> <li>Include src folder in NPM package</li> </ul> </li> </ul> from <a href="https://redirect.github.com/SortableJS/Sortable/releases">sortablejs GitHub release notes</a> </details> </details> --- > [!IMPORTANT] > > - Check the changes in this PR to ensure they won't cause issues with your project. > - This PR was automatically created by Snyk using the credentials of a real user. --- **Note:** _You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs._ **For more information:** <img src="https://api.segment.io/v1/pixel/track?data=eyJ3cml0ZUtleSI6InJyWmxZcEdHY2RyTHZsb0lYd0dUcVg4WkFRTnNCOUEwIiwiYW5vbnltb3VzSWQiOiJhMzBiYmI0ZS1iMmY4LTQ3NmQtYjM2Ny01ZWQ1MDYxODBlMzYiLCJldmVudCI6IlBSIHZpZXdlZCIsInByb3BlcnRpZXMiOnsicHJJZCI6ImEzMGJiYjRlLWIyZjgtNDc2ZC1iMzY3LTVlZDUwNjE4MGUzNiJ9fQ==" width="0" height="0"/> > - 🧐 [View latest project report](https://app.snyk.io/org/newkdr/project/12a8a5f5-3e19-438c-8280-eb8f4ee06d17?utm_source=github&utm_medium=referral&page=upgrade-pr) > - 📜 [Customise PR templates](https://docs.snyk.io/scan-using-snyk/pull-requests/snyk-fix-pull-or-merge-requests/customize-pr-templates?utm_source=&utm_content=fix-pr-template) > - 🛠 [Adjust upgrade PR settings](https://app.snyk.io/org/newkdr/project/12a8a5f5-3e19-438c-8280-eb8f4ee06d17/settings/integration?utm_source=github&utm_medium=referral&page=upgrade-pr) > - 🔕 [Ignore this dependency or unsubscribe from future upgrade PRs](https://app.snyk.io/org/newkdr/project/12a8a5f5-3e19-438c-8280-eb8f4ee06d17/settings/integration?pkg=sortablejs&utm_source=github&utm_medium=referral&page=upgrade-pr#auto-dep-upgrades) [//]: # 'snyk:metadata:{"customTemplate":{"variablesUsed":[],"fieldsUsed":[]},"dependencies":[{"name":"sortablejs","from":"1.15.3","to":"1.15.6"}],"env":"prod","hasFixes":false,"isBreakingChange":false,"isMajorUpgrade":false,"issuesToFix":[],"prId":"a30bbb4e-b2f8-476d-b367-5ed506180e36","prPublicId":"a30bbb4e-b2f8-476d-b367-5ed506180e36","packageManager":"npm","priorityScoreList":[],"projectPublicId":"12a8a5f5-3e19-438c-8280-eb8f4ee06d17","projectUrl":"https://app.snyk.io/org/newkdr/project/12a8a5f5-3e19-438c-8280-eb8f4ee06d17?utm_source=github&utm_medium=referral&page=upgrade-pr","prType":"upgrade","templateFieldSources":{"branchName":"default","commitMessage":"default","description":"default","title":"default"},"templateVariants":[],"type":"auto","upgrade":[],"upgradeInfo":{"versionsDiff":3,"publishedDate":"2024-11-28T18:21:49.918Z"},"vulns":[]}'
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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: [email protected]
Versions:
sortablejs = ^1.15.0
The text was updated successfully, but these errors were encountered: