Dragged objects are stuck to mouse after forced page focus change (e.g. taking a screenshot)

[hybridherbst]

Expected behavior

Dragged objects should only ever follow the mouse if the mouse is clicked. However, it seems that certain interactions (such as taking a screenshot while dragging) will put the object into an incorrect state where it's dragged around despite the mouse not being clicked.

Actual behavior

Object is "stuck" to mouse despite no click

System configuration

interact.js version: latest Browser name and version: Chrome, Firefox Operating System: Windows

Additional Info

• ✔️ doesn't happen here https://web.dev/drag-and-drop/
• ✔️ doesn't happen here https://www.w3schools.com/html/html5_draganddrop.asp
• ❌ happens here https://interactjs.io/

[taye]

Do you have examples of other times this can happen?

As far as I'm aware, the lib listens for all of the relevant events that should end a drag - blur, pointerup, pointercancel and the mouse and touch equivalent when appropriate.

[hybridherbst]

It also happens when

• starting to drag
• alt+tabbing into another app
• letting the mouse go while over that other app
• hovering over the original drag place (not clicked)
• focusing the page again (clicking on the browser UI, not the page)
• even when scrolling, the "stickiness" persists

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[hybridherbst]

This issue is still present.

[taye]

Those demos are in iframes, so there's no mouse up coming from the parent window when you click the scrollbars. If they weren't in the iframe, I think it wouldn't be so bad. I don't think there's much that can be done about this issue on WIndows. Have you checked what happens with other drag and drop libs when they're in iframes?