Draggable Pane sticks to cursor when dragging operation is interrupted. about svelte-tweakpane-ui HOT 6 CLOSED

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.

from svelte-tweakpane-ui.

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...

from svelte-tweakpane-ui.

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

from svelte-tweakpane-ui.

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.

from svelte-tweakpane-ui.

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?

from svelte-tweakpane-ui.

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:

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.

from svelte-tweakpane-ui.