Cleanup drag state when a resize handle unmounts while dragging

Author: bvaughn

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

@@ -816,6 +816,7 @@ function PanelGroupWithForwardedRef({
     [resizePanel]
   );
 
+  // TODO Multiple drag handles can be active at the same time so this API is a bit awkward now
   const startDragging = useCallback(
     (dragHandleId: string, event: ResizeEvent) => {
       const { direction } = committedValuesRef.current;

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

@@ -129,13 +129,15 @@ export function PanelResizeHandle({
     const setResizeHandlerState = (
       action: ResizeHandlerAction,
       isActive: boolean,
-      event: ResizeEvent
+      event: ResizeEvent | null
     ) => {
       if (isActive) {
         switch (action) {
           case "down": {
             setState("drag");
 
+            assert(event, 'Expected event to be defined for "down" action');
+
             startDragging(resizeHandleId, event);
 
             const { onDragging } = callbacksRef.current;
@@ -151,6 +153,8 @@ export function PanelResizeHandle({
               setState("hover");
             }
 
+            assert(event, 'Expected event to be defined for "move" action');
+
             resizeHandler(event);
             break;
           }

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

@@ -9,7 +9,7 @@ export type ResizeHandlerAction = "down" | "move" | "up";
 export type SetResizeHandlerState = (
   action: ResizeHandlerAction,
   isActive: boolean,
-  event: ResizeEvent
+  event: ResizeEvent | null
 ) => void;
 
 export type PointerHitAreaMargins = {
@@ -83,6 +83,10 @@ export function registerResizeHandle(
       }
 
       updateCursor();
+
+      // Also instruct the handle to stop dragging; this prevents the parent group from being left in an inconsistent state
+      // See github.com/bvaughn/react-resizable-panels/issues/402
+      setResizeHandlerState("up", true, null);
     }
   };
 }