BugFix: onDragging prop only called for active handle(s)

packages/react-resizable-panels/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 2.0.4
+
+- Fixed `PanelResizeHandle` `onDragging` prop to only be called for the handle being dragged (#289)
+
 ## 2.0.3
 
 - Fix resize handle onDragging callback (#278)

packages/react-resizable-panels/src/Panel.test.tsx

@@ -5,6 +5,7 @@ import { assert } from "./utils/assert";
 import { getPanelElement } from "./utils/dom/getPanelElement";
 import {
   mockPanelGroupOffsetWidthAndHeight,
+  verifyAttribute,
   verifyExpandedPanelGroupLayout,
 } from "./utils/test-utils";
 import { createRef } from "./vendor/react";
@@ -675,6 +676,68 @@ describe("PanelGroup", () => {
     });
   });
 
+  describe("data attributes", () => {
+    it("should initialize with the correct props based attributes", () => {
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal" id="test-group">
+            <Panel defaultSize={75} id="left-panel" />
+            <PanelResizeHandle />
+            <Panel collapsible id="right-panel" />
+          </PanelGroup>
+        );
+      });
+
+      const leftElement = getPanelElement("left-panel", container);
+      const rightElement = getPanelElement("right-panel", container);
+
+      assert(leftElement);
+      assert(rightElement);
+
+      verifyAttribute(leftElement, "data-panel", "");
+      verifyAttribute(leftElement, "data-panel-id", "left-panel");
+      verifyAttribute(leftElement, "data-panel-group-id", "test-group");
+      verifyAttribute(leftElement, "data-panel-size", "75.0");
+      verifyAttribute(leftElement, "data-panel-collapsible", null);
+
+      verifyAttribute(rightElement, "data-panel", "");
+      verifyAttribute(rightElement, "data-panel-id", "right-panel");
+      verifyAttribute(rightElement, "data-panel-group-id", "test-group");
+      verifyAttribute(rightElement, "data-panel-size", "25.0");
+      verifyAttribute(rightElement, "data-panel-collapsible", "true");
+    });
+
+    it("should update the data-panel-size attribute when the panel resizes", () => {
+      const leftPanelRef = createRef<ImperativePanelHandle>();
+
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal" id="test-group">
+            <Panel defaultSize={75} id="left-panel" ref={leftPanelRef} />
+            <PanelResizeHandle />
+            <Panel collapsible id="right-panel" />
+          </PanelGroup>
+        );
+      });
+
+      const leftElement = getPanelElement("left-panel", container);
+      const rightElement = getPanelElement("right-panel", container);
+
+      assert(leftElement);
+      assert(rightElement);
+
+      verifyAttribute(leftElement, "data-panel-size", "75.0");
+      verifyAttribute(rightElement, "data-panel-size", "25.0");
+
+      act(() => {
+        leftPanelRef.current?.resize(30);
+      });
+
+      verifyAttribute(leftElement, "data-panel-size", "30.0");
+      verifyAttribute(rightElement, "data-panel-size", "70.0");
+    });
+  });
+
   describe("DEV warnings", () => {
     it("should warn about server rendered panels with no default size", () => {
       jest.resetModules();

packages/react-resizable-panels/src/PanelGroup.test.tsx

@@ -13,7 +13,10 @@ import {
 } from ".";
 import { assert } from "./utils/assert";
 import { getPanelGroupElement } from "./utils/dom/getPanelGroupElement";
-import { mockPanelGroupOffsetWidthAndHeight } from "./utils/test-utils";
+import {
+  mockPanelGroupOffsetWidthAndHeight,
+  verifyAttribute,
+} from "./utils/test-utils";
 import { createRef } from "./vendor/react";
 
 describe("PanelGroup", () => {
@@ -256,6 +259,23 @@ describe("PanelGroup", () => {
     });
   });
 
+  describe("data attributes", () => {
+    it("should initialize with the correct props based attributes", () => {
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal" id="test-group"></PanelGroup>
+        );
+      });
+
+      const element = getPanelGroupElement("test-group", container);
+      assert(element);
+
+      verifyAttribute(element, "data-panel-group", "");
+      verifyAttribute(element, "data-panel-group-direction", "horizontal");
+      verifyAttribute(element, "data-panel-group-id", "test-group");
+    });
+  });
+
   describe("DEV warnings", () => {
     it("should warn about unstable layouts without id and order props", () => {
       act(() => {

packages/react-resizable-panels/src/PanelResizeHandle.test.tsx

@@ -1,9 +1,14 @@
 import { Root, createRoot } from "react-dom/client";
 import { act } from "react-dom/test-utils";
+import type { PanelResizeHandleProps } from "react-resizable-panels";
 import { Panel, PanelGroup, PanelResizeHandle } from ".";
 import { assert } from "./utils/assert";
 import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement";
-import { dispatchPointerEvent } from "./utils/test-utils";
+import {
+  dispatchPointerEvent,
+  mockBoundingClientRect,
+  verifyAttribute,
+} from "./utils/test-utils";
 
 describe("PanelResizeHandle", () => {
   let expectedWarnings: string[] = [];
@@ -67,47 +72,193 @@ describe("PanelResizeHandle", () => {
     expect(element.title).toBe("bar");
   });
 
+  function setupMockedGroup({
+    leftProps = {},
+    rightProps = {},
+  }: {
+    leftProps?: Partial<PanelResizeHandleProps>;
+    rightProps?: Partial<PanelResizeHandleProps>;
+  } = {}) {
+    act(() => {
+      root.render(
+        <PanelGroup direction="horizontal" id="test-group">
+          <Panel />
+          <PanelResizeHandle id="handle-left" tabIndex={1} {...leftProps} />
+          <Panel />
+          <PanelResizeHandle id="handle-right" tabIndex={2} {...rightProps} />
+          <Panel />
+        </PanelGroup>
+      );
+    });
+
+    const leftElement = getResizeHandleElement("handle-left", container);
+    const rightElement = getResizeHandleElement("handle-right", container);
+
+    assert(leftElement);
+    assert(rightElement);
+
+    // JSDom doesn't properly handle bounding rects
+    mockBoundingClientRect(leftElement, {
+      x: 50,
+      y: 0,
+      height: 50,
+      width: 2,
+    });
+    mockBoundingClientRect(rightElement, {
+      x: 100,
+      y: 0,
+      height: 50,
+      width: 2,
+    });
+
+    return {
+      leftElement,
+      rightElement,
+    };
+  }
+
   describe("callbacks", () => {
     describe("onDragging", () => {
-      it("should fire when dragging starts/stops", async () => {
+      it("should fire when dragging starts/stops", () => {
         const onDragging = jest.fn();
 
-        act(() => {
-          root.render(
-            <PanelGroup direction="horizontal">
-              <Panel />
-              <PanelResizeHandle
-                id="handle"
-                onDragging={onDragging}
-                tabIndex={123}
-                title="bar"
-              />
-              <Panel />
-            </PanelGroup>
-          );
+        const { leftElement } = setupMockedGroup({
+          leftProps: { onDragging },
         });
 
-        const handleElement = container.querySelector(
-          '[data-panel-resize-handle-id="handle"]'
-        ) as HTMLElement;
-
         act(() => {
-          dispatchPointerEvent("mouseover", handleElement);
+          dispatchPointerEvent("mousemove", leftElement);
         });
         expect(onDragging).not.toHaveBeenCalled();
 
         act(() => {
-          dispatchPointerEvent("mousedown", handleElement);
+          dispatchPointerEvent("mousedown", leftElement);
         });
         expect(onDragging).toHaveBeenCalledTimes(1);
         expect(onDragging).toHaveBeenCalledWith(true);
 
         act(() => {
-          dispatchPointerEvent("mouseup", handleElement);
+          dispatchPointerEvent("mouseup", leftElement);
         });
         expect(onDragging).toHaveBeenCalledTimes(2);
         expect(onDragging).toHaveBeenCalledWith(false);
       });
+
+      it("should only fire for the handle that has been dragged", () => {
+        const onDraggingLeft = jest.fn();
+        const onDraggingRight = jest.fn();
+
+        const { leftElement } = setupMockedGroup({
+          leftProps: { onDragging: onDraggingLeft },
+          rightProps: { onDragging: onDraggingRight },
+        });
+
+        act(() => {
+          dispatchPointerEvent("mousemove", leftElement);
+        });
+        expect(onDraggingLeft).not.toHaveBeenCalled();
+        expect(onDraggingRight).not.toHaveBeenCalled();
+
+        act(() => {
+          dispatchPointerEvent("mousedown", leftElement);
+        });
+        expect(onDraggingLeft).toHaveBeenCalledTimes(1);
+        expect(onDraggingLeft).toHaveBeenCalledWith(true);
+        expect(onDraggingRight).not.toHaveBeenCalled();
+
+        act(() => {
+          dispatchPointerEvent("mouseup", leftElement);
+        });
+        expect(onDraggingLeft).toHaveBeenCalledTimes(2);
+        expect(onDraggingLeft).toHaveBeenCalledWith(false);
+        expect(onDraggingRight).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe("data attributes", () => {
+    it("should initialize with the correct props based attributes", () => {
+      const { leftElement, rightElement } = setupMockedGroup();
+
+      verifyAttribute(leftElement, "data-panel-group-id", "test-group");
+      verifyAttribute(leftElement, "data-resize-handle", "");
+      verifyAttribute(leftElement, "data-panel-group-direction", "horizontal");
+      verifyAttribute(leftElement, "data-panel-resize-handle-enabled", "true");
+      verifyAttribute(
+        leftElement,
+        "data-panel-resize-handle-id",
+        "handle-left"
+      );
+
+      verifyAttribute(rightElement, "data-panel-group-id", "test-group");
+      verifyAttribute(rightElement, "data-resize-handle", "");
+      verifyAttribute(rightElement, "data-panel-group-direction", "horizontal");
+      verifyAttribute(rightElement, "data-panel-resize-handle-enabled", "true");
+      verifyAttribute(
+        rightElement,
+        "data-panel-resize-handle-id",
+        "handle-right"
+      );
+    });
+
+    it("should update data-resize-handle-active and data-resize-handle-state when dragging starts/stops", () => {
+      const { leftElement, rightElement } = setupMockedGroup();
+      verifyAttribute(leftElement, "data-resize-handle-active", null);
+      verifyAttribute(rightElement, "data-resize-handle-active", null);
+      verifyAttribute(leftElement, "data-resize-handle-state", "inactive");
+      verifyAttribute(rightElement, "data-resize-handle-state", "inactive");
+
+      act(() => {
+        dispatchPointerEvent("mousemove", leftElement);
+      });
+      verifyAttribute(leftElement, "data-resize-handle-active", null);
+      verifyAttribute(rightElement, "data-resize-handle-active", null);
+      verifyAttribute(leftElement, "data-resize-handle-state", "hover");
+      verifyAttribute(rightElement, "data-resize-handle-state", "inactive");
+
+      act(() => {
+        dispatchPointerEvent("mousedown", 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);
+      });
+      verifyAttribute(leftElement, "data-resize-handle-active", null);
+      verifyAttribute(rightElement, "data-resize-handle-active", null);
+      verifyAttribute(leftElement, "data-resize-handle-state", "hover");
+      verifyAttribute(rightElement, "data-resize-handle-state", "inactive");
+
+      act(() => {
+        dispatchPointerEvent("mousemove", rightElement);
+      });
+      verifyAttribute(leftElement, "data-resize-handle-active", null);
+      verifyAttribute(rightElement, "data-resize-handle-active", null);
+      verifyAttribute(leftElement, "data-resize-handle-state", "inactive");
+      verifyAttribute(rightElement, "data-resize-handle-state", "hover");
+    });
+
+    it("should update data-resize-handle-active when focused", () => {
+      const { leftElement, rightElement } = setupMockedGroup();
+      verifyAttribute(leftElement, "data-resize-handle-active", null);
+      verifyAttribute(rightElement, "data-resize-handle-active", null);
+
+      act(() => {
+        leftElement.focus();
+      });
+      expect(document.activeElement).toBe(leftElement);
+      verifyAttribute(leftElement, "data-resize-handle-active", "keyboard");
+      verifyAttribute(rightElement, "data-resize-handle-active", null);
+
+      act(() => {
+        leftElement.blur();
+      });
+      expect(document.activeElement).not.toBe(leftElement);
+      verifyAttribute(leftElement, "data-resize-handle-active", null);
+      verifyAttribute(rightElement, "data-resize-handle-active", null);
     });
   });
 });