fix(panel): keep focus where a press, autofocus or resize leaves it

A press on the resize handle never focused it: preventing the
pointerdown default also cancelled the focus a press gives, so the
arrow keys did nothing until Tab reached the handle. The drag already
blocks text selection with user-select, so let the press focus it.

A pane that autofocuses a field takes focus before the panel's mount
effect runs, so the panel saved that field as its opener and focus
fell to the body on close. Record where focus came from when it moved
into the panel and use that as the opener in this case. Under
StrictMode the simulated remount would hand the field's focus to the
opener, so give it back when the effect sets up again.

When the row widened and the overlay went away, focus stayed on the
panel root. Give it back to what the overlay took it from, if it is
still on the panel itself.

Author: pratikbuilds

e2e/panel.spec.ts

@@ -81,6 +81,22 @@ test("double-click and Enter reset the width", async ({ page }) => {
   expect(Math.round(await width(page, "panel"))).toBe(start);
 });
 
+test("a click on the handle focuses it for the arrow keys", async ({
+  page,
+}) => {
+  await page.goto("/panel");
+  const handle = page.getByRole("separator", { name: "Resize panel" });
+  const output = page.getByRole("status", { name: "Width" });
+  const start = Math.round(await width(page, "panel"));
+  await page.getByRole("button", { name: "Show notes" }).focus();
+
+  await handle.click();
+  await expect(handle).toBeFocused();
+  await expect(output).toHaveText("default");
+  await page.keyboard.press("ArrowLeft");
+  await expect(output).toHaveText(String(start + 16));
+});
+
 test("the main area keeps its minimum width", async ({ page }) => {
   await page.goto("/panel");
   const handle = page.getByRole("separator", { name: "Resize panel" });
@@ -215,4 +231,6 @@ test("narrowing the row while the panel is open turns it into an overlay", async
   await page.setViewportSize({ width: 1280, height: 720 });
   await expect(main).not.toHaveAttribute("inert");
   await expect(page.getByRole("separator")).toBeVisible();
+  // Side by side again, focus goes back to what the overlay covered.
+  await expect(page.getByRole("button", { name: "Show notes" })).toBeFocused();
 });

src/hooks/use-resizable.ts

@@ -226,7 +226,6 @@ export function useResizable(options: UseResizableOptions): UseResizableResult {
     const element = elementRef.current;
     const handle = event.currentTarget;
     if (element === null || event.button !== 0 || !event.isPrimary) return;
-    event.preventDefault();
     stopDragRef.current?.();
     handle.setPointerCapture(event.pointerId);
 
@@ -249,6 +248,8 @@ export function useResizable(options: UseResizableOptions): UseResizableResult {
     draggingRef.current = true;
     handle.dataset["dragging"] = "true";
     root.style.cursor = "col-resize";
+    // This, not preventing the press's default, keeps the drag from
+    // selecting text: the default is what focuses the handle.
     root.style.userSelect = "none";
 
     const move = (moveEvent: PointerEvent) => {

src/ui/panel.test.tsx

@@ -1,4 +1,4 @@
-import { act, useState } from "react";
+import { act, StrictMode, useState } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { describe, expect, test } from "bun:test";
 
@@ -152,6 +152,84 @@ describe("Panel", () => {
     mounted.unmount();
   });
 
+  test("closing returns focus to the opener when a pane autofocused a field", () => {
+    function Host() {
+      const [open, setOpen] = useState(false);
+      return (
+        <>
+          <button type="button" onClick={() => setOpen(true)}>
+            Open thread
+          </button>
+          <button type="button" onClick={() => setOpen(false)}>
+            Hide thread
+          </button>
+          {open ? (
+            <Panel aria-label="Thread">
+              <PanelContent value="reply">
+                <PanelPane value="reply">
+                  <input aria-label="Reply" autoFocus />
+                </PanelPane>
+              </PanelContent>
+            </Panel>
+          ) : null}
+        </>
+      );
+    }
+    const mounted = mount(<Host />);
+    const [opener, hide] = mounted.container.querySelectorAll("button");
+    if (opener === undefined || hide === undefined)
+      throw new Error("expected the host's buttons");
+    opener.focus();
+    act(() => opener.click());
+    expect(document.activeElement?.getAttribute("aria-label")).toBe("Reply");
+    // Closed by the host while focus is still in the panel, as a shortcut
+    // would: a click on the button would move focus to it first.
+    act(() => hide.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(mounted.container.querySelector("aside")).toBeNull();
+    expect(document.activeElement).toBe(opener);
+    mounted.unmount();
+  });
+
+  test("under StrictMode an autofocused field keeps focus, and close returns it", () => {
+    function Host() {
+      const [open, setOpen] = useState(false);
+      return (
+        <>
+          <button type="button" onClick={() => setOpen(true)}>
+            Open thread
+          </button>
+          <button type="button" onClick={() => setOpen(false)}>
+            Hide thread
+          </button>
+          {open ? (
+            <Panel aria-label="Thread">
+              <PanelContent value="reply">
+                <PanelPane value="reply">
+                  <input aria-label="Reply" autoFocus />
+                </PanelPane>
+              </PanelContent>
+            </Panel>
+          ) : null}
+        </>
+      );
+    }
+    const mounted = mount(
+      <StrictMode>
+        <Host />
+      </StrictMode>,
+    );
+    const [opener, hide] = mounted.container.querySelectorAll("button");
+    if (opener === undefined || hide === undefined)
+      throw new Error("expected the host's buttons");
+    opener.focus();
+    act(() => opener.click());
+    expect(document.activeElement?.getAttribute("aria-label")).toBe("Reply");
+    act(() => hide.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(mounted.container.querySelector("aside")).toBeNull();
+    expect(document.activeElement).toBe(opener);
+    mounted.unmount();
+  });
+
   test("as an overlay the panel makes the covered main area inert until it closes", () => {
     function Host() {
       const [open, setOpen] = useState(false);

src/ui/panel.tsx

@@ -76,7 +76,8 @@ export type PanelProps = React.ComponentProps<"aside"> & {
  * query), the panel covers the row instead: it takes focus, hides its
  * handle, and makes the rest of the row inert so focus and assistive
  * technology cannot reach what it covers. This follows the row's size while
- * the panel is open.
+ * the panel is open; when the row widens again, focus still on the panel
+ * itself goes back to what the overlay took it from.
  *
  * However it closes, focus that was inside the panel goes back to whatever
  * had it before the panel opened.
@@ -92,6 +93,7 @@ export function Panel({
   style,
   className,
   children,
+  onFocus,
   ...props
 }: PanelProps) {
   const generatedId = useId();
@@ -104,6 +106,14 @@ export function Panel({
     mainMinWidth,
   });
   const elementRef = useRef<HTMLElement | null>(null);
+  // Where focus came from when it last moved into the panel. An `autoFocus`
+  // field in a pane takes focus before the mount effect below runs, and
+  // this is how that effect still finds the opener.
+  const focusedFromRef = useRef<Element | null>(null);
+  // What had focus inside the panel when the mount effect last cleaned up.
+  // Only StrictMode's simulated remount runs the effect again, and it gives
+  // that element its focus back.
+  const focusedOnCleanupRef = useRef<HTMLElement | null>(null);
 
   const setElement = useCallback(
     (element: HTMLElement | null) => {
@@ -118,24 +128,42 @@ export function Panel({
   useLayoutEffect(() => {
     const panel = elementRef.current;
     if (panel === null) return;
-    const opener = document.activeElement;
+    const opener = panel.contains(document.activeElement)
+      ? focusedFromRef.current
+      : document.activeElement;
     let restoreSiblings: (() => void) | null = null;
+    // What had focus when the panel became an overlay and took it.
+    let covered: HTMLElement | null = null;
     // The `@container` query decides whether the panel covers the row, so
     // its computed position is the signal. As an overlay, the panel takes
     // focus and makes the covered main area inert; side by side again, the
-    // main area comes back. Re-checked whenever the row resizes, as plain
-    // DOM work with no React render.
+    // main area comes back, and so does focus the overlay took if it is
+    // still on the panel itself. Re-checked whenever the row resizes, as
+    // plain DOM work with no React render.
     const syncOverlay = () => {
       const overlay = getComputedStyle(panel).position === "absolute";
       if (overlay && restoreSiblings === null) {
-        if (!panel.contains(document.activeElement)) panel.focus();
+        const active = document.activeElement;
+        if (!panel.contains(active)) {
+          covered =
+            active instanceof HTMLElement && active !== document.body
+              ? active
+              : null;
+          panel.focus();
+        }
         restoreSiblings = inertSiblings(panel);
       } else if (!overlay && restoreSiblings !== null) {
         restoreSiblings();
         restoreSiblings = null;
+        if (document.activeElement === panel && covered?.isConnected)
+          covered.focus();
+        covered = null;
       }
     };
     syncOverlay();
+    const refocus = focusedOnCleanupRef.current;
+    focusedOnCleanupRef.current = null;
+    if (refocus?.isConnected && panel.contains(refocus)) refocus.focus();
     const row = panel.parentElement;
     const observer =
       row === null || typeof ResizeObserver === "undefined"
@@ -149,6 +177,8 @@ export function Panel({
       const active = document.activeElement;
       const focusLeftWithPanel =
         active === null || active === document.body || panel.contains(active);
+      focusedOnCleanupRef.current =
+        active instanceof HTMLElement && panel.contains(active) ? active : null;
       // The opener is usually in the main area, so lift its inertness first.
       restoreSiblings?.();
       if (
@@ -175,6 +205,11 @@ export function Panel({
         tabIndex={-1}
         data-slot="panel"
         style={{ ...sizing, ...style }}
+        onFocus={(event) => {
+          onFocus?.(event);
+          if (!event.currentTarget.contains(event.relatedTarget))
+            focusedFromRef.current = event.relatedTarget;
+        }}
         className={cn(
           "relative flex h-full min-h-0 shrink-0 flex-col border-s border-border bg-background text-foreground focus-visible:-outline-offset-2",
           "w-[var(--resizable-width,clamp(calc(var(--spacing)*120),46%,calc(var(--spacing)*190)))]",