Draggable Pane sticks to cursor when dragging operation is interrupted.

[xDUDSSx]

When you drag the draggable pane and, for example, Alt+Tab out of the browser window. Upon returning the pane will stick to the cursor even when the user isn't dragging (holding down LMB) anymore. This can be easily reproduced in the demo that is in the docs.

I've been digging through the InternalPaneDraggable.svelte code and I'm guessing this might be because of the "pointerup" event not firing upon stuff like Alt-Tabbing, this might be an easy fix by adding a "pointercancel" event listener as well that unbinds the move listener like the upListener would. I haven't tested that though.

[kitschpatrol]

Hi, thanks for using the library and for bringing this to my attention!

I'll look into it. Pointer events can be tricky since the browser doesn't always send them when it should...

[xDUDSSx]

I noticed the same issue being discussed here at the interact.js repo which is also dealing with making elements draggable. https://github.com/taye/interact.js/issues/962 Seemingly they haven't found a solution yet so maybe it's a bit more problematic like you said.

[kitschpatrol]

Thanks for the link, I will take a look. There might be another event I can listen for, perhaps when the window loses focus.

Will play around with it in the next few days.

[kitschpatrol]

So far I'm only able to reproduce this in Firefox. Safari and Chrome seem fine.

Do you mind sharing which browser you're testing with?

[kitschpatrol]

Ok, I've just published a likely fix in v1.2.5. Panes now listen for the window's blur event while dragging, and treat it as a pointercancel event.

Just to make sure we're on the same page about the issue, my test cycle is:

1. Start dragging the Pane toolbar or width-adjustment handle.
2. Command-tab to blur the browser window.
3. Release the mouse outside the browser window.
4. Reposition the mouse over the unfocused browser window, expecting that Pane dragging has ended, and that the cursor shows its default style.
5. Click to re-focus the browser window, expecting that subsequent Pane drag gestures will work correctly.

In my admittedly informal testing, WebKit and derivatives on the Mac seem to handle this edge case correctly in the previous release of Svelte Tweakpane UI, at least on the desktop, but Firefox does not and Windows is a universal mess:

Browser	pointerup while blurred	:active update while blurred
Safari Mac	✅ Yes	✅ Yes
Chrome Mac	✅ Yes	✅ Yes
Chrome Windows	❌ No	✅ Yes
Firefox Mac	❌ No	❌ No
Firefox Windows	❌ No	❌ No
Edge Windows	❌ No	❌ No

The sticky :active pseudo-class is particularly frustrating, because even if you successfully stop the dragging while unfocused, CSS selectors using :active (e.g. the cursor style) will remain stuck in their pre-blur state until you re-focus the browser.

I did find a work-around for the cursor: Dispatching a synthetic pointercancel event, then changing the cursor style directly via JS seems to trigger a cursor redraw, but :active still lingers in some Windows browsers.

I also added support for pointercancel events as you suggested, just for good measure.

I agree that the Firefox / Windows behavior was definitely broken, and is improved by this fix... but I think it actually makes the UX in Safari and Chrome on the Mac worse, since recovery of drag state is both occasionally useful and consistent with the behavior of native apps.

As loathe as I am to degrade the WebKit Mac experience, I'm more loathe to do platform detection, so I'll keep this fix in for now. Such is life in the web UX crab bucket. 🫠

Let me know if it's a fix on your end.

[xDUDSSx]

I was indeed testing with the troublesome Firefox on Windows. After your fix it works as expected for me.

I applaud you for such a quick and in-depth response for what is a somewhat minor issue :D. If you're happy with the fix you can close this.