fix(panel): restore the committed width and keep focus on pane switch

src/hooks/use-resizable.test.ts

@@ -250,14 +250,22 @@ describe("useResizable", () => {
     mounted.unmount();
   });
 
-  test("a controlled parent that ignores a change keeps its width", () => {
+  test("a controlled parent that ignores a change keeps its width", async () => {
     const mounted = mount({ width: 700 });
     expect(shownWidth(mounted)).toBe(700);
     mounted.press("ArrowLeft");
     expect(mounted.changes).toEqual([716]);
     expect(shownWidth(mounted)).toBe(700);
     mounted.rerender({ width: 716 });
     expect(shownWidth(mounted)).toBe(716);
+
+    mounted.pointer("pointerdown", 500);
+    mounted.pointer("pointermove", 400);
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    expect(shownWidth(mounted)).toBe(816);
+    mounted.pointer("pointerup", 400);
+    expect(mounted.changes).toEqual([716, 816]);
+    expect(shownWidth(mounted)).toBe(716);
     mounted.unmount();
   });
 
@@ -344,6 +352,25 @@ describe("useResizable", () => {
     mounted.unmount();
   });
 
+  test("a drag cut short without a release puts the committed width back", async () => {
+    const mounted = mount({ defaultWidth: 600 });
+    mounted.pointer("pointerdown", 500);
+    mounted.pointer("pointermove", 400);
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    expect(mounted.panel.style.getPropertyValue(RESIZABLE_WIDTH_VAR)).toBe(
+      "700px",
+    );
+    // A new press abandons the drag in flight; it never moves, so it commits
+    // nothing either.
+    mounted.pointer("pointerdown", 400);
+    mounted.pointer("pointerup", 400);
+    expect(mounted.changes).toEqual([]);
+    expect(mounted.panel.style.getPropertyValue(RESIZABLE_WIDTH_VAR)).toBe(
+      "600px",
+    );
+    mounted.unmount();
+  });
+
   test("a press that never moves past the drag threshold commits nothing", () => {
     // The stored 900 renders clamped to 560: a commit would overwrite it.
     rowWidth = 1000;

src/hooks/use-resizable.ts

@@ -213,9 +213,6 @@ export function useResizable(options: UseResizableOptions): UseResizableResult {
         );
         resolved = clamped === measureDefault(element) ? null : clamped;
       }
-      // Drop any drag-time override first: if the parent keeps its width,
-      // nothing else would put the element back.
-      writeWidth(element, widthRef.current);
       if (resolved !== widthRef.current) setWidth(resolved);
       measure();
     },
@@ -286,6 +283,10 @@ export function useResizable(options: UseResizableOptions): UseResizableResult {
       // React only rewrites the attribute when its value changes, so put
       // back what it last rendered.
       if (startValue !== null) handle.setAttribute("aria-valuenow", startValue);
+      // Drop the preview, whatever ends the drag: a release commits it next,
+      // and a parent that keeps its width would leave nothing else to put
+      // the element back.
+      writeWidth(element, widthRef.current);
       draggingRef.current = false;
       stopDragRef.current = null;
     };