Text selection is weird when using the library

[connoratmyxt]

Hi, I found this bug while using your library. I don't know how to fix this one.

Steps to reproduce

Text won't deselect:

1. Select text from lorem ipsum paragraph
2. Click on text selection to deselect it
3. It doesn't deselect the text

Selection can't be used:

1. Select text from lorem ipsum paragraph
2. Try to drag text, for example into a new tab
3. Text does not get dragged

Expected behavior

Text selection should stay normal when interacting with other elements when using the library.

Code

import agnosticDraggable from "https://cdn.skypack.dev/agnostic-draggable@1.4.3";
const { Sortable } = agnosticDraggable

const app = document.createElement("div")

const ipsum = document.createElement("div")
ipsum.textContent = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt pretium quam, a pellentesque erat tempor eget. Ut nec ex porttitor, interdum dolor nec, consequat lectus. Sed orci orci, sodales ac tincidunt in, accumsan in neque. Phasellus rutrum eros eget purus aliquet, vitae tincidunt lacus eleifend. Proin ultricies efficitur dui sit amet feugiat. Sed vel suscipit augue, posuere scelerisque massa. In vulputate laoreet lacinia. Aliquam erat volutpat. Etiam scelerisque dictum sodales. Mauris auctor egestas nunc in suscipit. Nullam hendrerit neque a feugiat eleifend. Integer et ornare velit, vitae sodales sapien. Vestibulum sollicitudin pulvinar ligula, at scelerisque ex molestie vel.`

app.appendChild(ipsum)
document.body.appendChild(app)

const container = document.createElement("div")

const els = new Array(10).fill(null).map(() => document.createElement("div"))
els.forEach((el, i) => {
    el.textContent = "Item: " + (i + 1)

    container.appendChild(el)
})

app.appendChild(container)

new Sortable(container)

Investigation

• happens with both Sortable and Draggable
• disabling the mousedown event on the html element via devtools makes text selection normal again
• running sortable.destroy() after creating a Sortable doesn't fix the issue, so it's possible that an event listener also isn't properly removed

[marcospont]

Hey,

I will run some investigation on the issue, thanks for the report.

[marcospont]

A fix was pushed for this: https://github.com/marcospont/agnostic-draggable/commit/2fba742a9f143cb283afd2d82ae82694e8b198ea

Codepen link: https://codepen.io/marcospont/pen/gOoKpqO