Don't reset drag state data attribute on mouse-move

bvaughn · Feb 10, 2024 · 6c74960 · 6c74960
1 parent 5afa01c
commit 6c74960
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/packages/react-resizable-panels/src/PanelResizeHandle.test.tsx b/packages/react-resizable-panels/src/PanelResizeHandle.test.tsx
@@ -224,6 +224,14 @@ describe("PanelResizeHandle", () => {
       verifyAttribute(leftElement, "data-resize-handle-state", "drag");
       verifyAttribute(rightElement, "data-resize-handle-state", "inactive");
 
+      act(() => {
+        dispatchPointerEvent("mousemove", leftElement);
+      });
+      verifyAttribute(leftElement, "data-resize-handle-active", "pointer");
+      verifyAttribute(rightElement, "data-resize-handle-active", null);
+      verifyAttribute(leftElement, "data-resize-handle-state", "drag");
+      verifyAttribute(rightElement, "data-resize-handle-state", "inactive");
+
       act(() => {
         dispatchPointerEvent("mouseup", leftElement);
       });

diff --git a/packages/react-resizable-panels/src/PanelResizeHandle.ts b/packages/react-resizable-panels/src/PanelResizeHandle.ts
@@ -7,6 +7,7 @@ import {
   ReactElement,
   useContext,
   useEffect,
+  useLayoutEffect,
   useRef,
   useState,
 } from "./vendor/react";
@@ -90,6 +91,16 @@ export function PanelResizeHandle({
     null
   );
 
+  const committedValuesRef = useRef<{
+    state: ResizeHandlerState;
+  }>({
+    state,
+  });
+
+  useLayoutEffect(() => {
+    committedValuesRef.current.state = state;
+  });
+
   useEffect(() => {
     if (disabled) {
       setResizeHandler(null);
@@ -126,7 +137,11 @@ export function PanelResizeHandle({
             break;
           }
           case "move": {
-            setState("hover");
+            const { state } = committedValuesRef.current;
+
+            if (state !== "drag") {
+              setState("hover");
+            }
 
             resizeHandler(event);
             break;