From a5c602c7400dc22118c8b9ac1b45072402d9fad9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Sat, 14 Sep 2024 11:07:48 -0400
Subject: [PATCH] Cleanup drag state when a resize handle unmounts while
 dragging

---
 packages/react-resizable-panels/src/PanelGroup.ts           | 1 +
 packages/react-resizable-panels/src/PanelResizeHandle.ts    | 6 +++++-
 .../react-resizable-panels/src/PanelResizeHandleRegistry.ts | 6 +++++-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/react-resizable-panels/src/PanelGroup.ts b/packages/react-resizable-panels/src/PanelGroup.ts
index 34625f51..f8aae953 100644
--- a/packages/react-resizable-panels/src/PanelGroup.ts
+++ b/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;
diff --git a/packages/react-resizable-panels/src/PanelResizeHandle.ts b/packages/react-resizable-panels/src/PanelResizeHandle.ts
index 4a9f5029..5ee7c83a 100644
--- a/packages/react-resizable-panels/src/PanelResizeHandle.ts
+++ b/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;
           }
diff --git a/packages/react-resizable-panels/src/PanelResizeHandleRegistry.ts b/packages/react-resizable-panels/src/PanelResizeHandleRegistry.ts
index ee117d7b..d19c7abe 100644
--- a/packages/react-resizable-panels/src/PanelResizeHandleRegistry.ts
+++ b/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);
     }
   };
 }