Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[bug] Text inputs in a sortable div can no longer be focused #2410

Closed
joeybab3 opened this issue Nov 25, 2024 · 5 comments
Closed

[bug] Text inputs in a sortable div can no longer be focused #2410

joeybab3 opened this issue Nov 25, 2024 · 5 comments
Labels
bug

Comments

@joeybab3
Copy link

joeybab3 commented Nov 25, 2024 •
edited
Loading

To Reproduce

  1. Click on a form input within a div that is draggable
  2. Focus is immediately removed.
  3. Opening inspect element shows that when the text field is clicked the element becomes draggable.

Expected behavior

In previous versions I was able to click to type in these forms and then drag elsewhere.

This issue is not present in 1.15.3

Information

Versions:
sortablejs = @latest(1.15.4)

Reproduction
https://jsbin.com/rukomad/1/edit?html,css,output
@trcat
Copy link

trcat commented Nov 26, 2024

same problem

@trcat
Copy link

trcat commented Nov 26, 2024

i use filter to expect input to fix this problem

@arsqu
Copy link

arsqu commented Nov 27, 2024

try
#972 (comment)
example
https://jsbin.com/penizaw/edit?html,css,js,output

@owen-m1
Copy link
Member

owen-m1 commented Nov 27, 2024

Thank you for reporting, this is a byproduct of another fix that was necessary to prevent text from being selected during dragging. Please follow @arsqu's solution for a reliable fix. I will probably change the new behaviour to only occur during fallback to mitigate this problem.

owen-m1 added a commit that referenced this issue Nov 27, 2024
@owen-m1
#2410: clear selection after drag start only with fallback
ca13d2c
@owen-m1 owen-m1 added the bug label Nov 27, 2024
owen-m1 added a commit that referenced this issue Nov 27, 2024
@owen-m1
#2410: Further improve selection handling on drag start
a81251f
@owen-m1
Copy link
Member

owen-m1 commented Nov 27, 2024

Please try 1.15.5 and let me know if it's working again

@owen-m1 owen-m1 closed this as completed Nov 28, 2024
newkdr added a commit to newkdr/vscode-gitlens that referenced this issue Dec 24, 2024
@newkdr
[Snyk] Upgrade sortablejs from 1.15.3 to 1.15.6 (#11)
f68b8d8 
![snyk-top-banner](https://redirect.github.com/andygongea/OWASP-Benchmark/assets/818805/c518c423-16fe-447e-b67f-ad5a49b5d123)


<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&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;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&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;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&#x3D;sortablejs&amp;utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;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
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@joeybab3 @trcat @arsqu @owen-m1