BugFix: Global cursor style reset on unmount

[TAGC]

Fixes #308.

This PR updates the PanelResizeHandle component to call resetGlobalCursorStyle when unmounted. This should prevent the cursor from indefinitely retaining the "resize" style if the component is unmounted as a panel is being resized.

I've tested out these changes locally and they appear to resolve the issue.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-resizable-panels	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 26, 2024 10:42am

[bvaughn]

I think this is an over-simplification. The cursor should only be updated/reset if one or more of the resize handles the user is currently interacting with get unmounted. That's something the PanelResizeHandleRegistry has to manage.

Handles register and unregister themselves with that registry on mount:

react-resizable-panels/packages/react-resizable-panels/src/PanelResizeHandle.ts

Lines 166 to 187 in 44d3a65

	return registerResizeHandle(
	resizeHandleId,
	element,
	direction,
	{
	// Coarse inputs (e.g. finger/touch)
	coarse: hitAreaMargins?.coarse ?? 15,
	// Fine inputs (e.g. mouse)
	fine: hitAreaMargins?.fine ?? 5,
	},
	setResizeHandlerState
	);
	}, [
	direction,
	disabled,
	hitAreaMargins,
	registerResizeHandleWithParentGroup,
	resizeHandleId,
	resizeHandler,
	startDragging,
	stopDragging,
	]);

I think the fix here needs to be in the unregister function:

react-resizable-panels/packages/react-resizable-panels/src/PanelResizeHandleRegistry.ts

Lines 64 to 76 in 44d3a65

	return function unregisterResizeHandle() {
	panelConstraintFlags.delete(resizeHandleId);
	registeredResizeHandlers.delete(data);
	const count = ownerDocumentCounts.get(ownerDocument) ?? 1;
	ownerDocumentCounts.set(ownerDocument, count - 1);
	updateListeners();
	if (count === 1) {
	ownerDocumentCounts.delete(ownerDocument);
	}
	};

[bvaughn]

I think the right fix might be- on unregister- if there are any current intersecting drag handles, re-compute them and then update the cursor again (using the same methods already defined in that module)

[TAGC]

Just an update on my end - work on this has been deprioritised as the team for the other frontend have found a workaround for the issue they were experiencing, and I've had higher priority stuff come through. I'd still like to continue on this when I get a chance, though.

[bvaughn]

Thanks for the update!

[TAGC]

I retained this test from my original attempt at fixing this bug. I've dropped the test "resets the global cursor style on disabled", as this is not the behaviour we want.

[TAGC]

@bvaughn

These changes were written by ChatGPT after I explained the problem to it and fed it the source code for the relevant files. It seems to work as expected; I've not yet observed the issue re-appear in the project I have linked against the forked version of this library. It seems to match your recommended approach:

I think the right fix might be- on unregister- if there are any current intersecting drag handles, re-compute them and then update the cursor again (using the same methods already defined in that module)

I asked ChatGPT (and had a look myself) whether it would be possible to call the existing recalculateIntersectingHandles function within the unregister callback, but it seems this would require more refactoring and potentially be more brittle than the solution ChatGPT proposes that involves writing these two new functions. We can discuss whether there's a way to simplify this further and re-use more of the existing code, though.