fix(app): keep focused tooltip controls open

packages/app/e2e/browser/context-window-meter.spec.ts

@@ -3,7 +3,10 @@ import type { UsageReportEntry } from "@getpaseo/protocol/messages";
 import { expect, test } from "../support/fixtures";
 import { expectComposerVisible } from "../support/helpers/composer";
 import { openAgentRoute, seedMockAgentWorkspace } from "../support/helpers/mock-agent";
-import { installUsageReportsFixture } from "../support/helpers/usage-reports";
+import {
+  installUsageReportsFixture,
+  type UsageReportsFixture,
+} from "../support/helpers/usage-reports";
 
 const USAGE_ICON =
   '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="currentColor"/></svg>';
@@ -23,6 +26,10 @@ function contextUsageReport(): UsageReportEntry {
   };
 }
 
+function forcedRefreshRequests(usage: UsageReportsFixture) {
+  return usage.listRequests().filter((request) => request.forceRefresh);
+}
+
 // Where the progress arc is painted, as its centroid relative to the ring's centre in pixels.
 // Reads the rendered pixels, so any rotation that does not reach the screen counts as none.
 async function progressArcCentroid(meter: Locator): Promise<{ x: number; y: number }> {
@@ -116,12 +123,14 @@ test.describe("context window meter", () => {
       const refresh = tooltip.getByRole("button", { name: "Refresh Mock plan" });
       await page.keyboard.press("Tab");
       await expect(refresh).toBeFocused();
+      await page.mouse.move(0, 0);
+      await page.waitForTimeout(150); // Longer than the trigger's close grace period.
+      await expect(refresh).toBeFocused();
+      await expect(tooltip).toBeVisible();
       await page.keyboard.press("Enter");
-      await usage.waitForListRequests(2);
-      expect(usage.listRequests()[1]).toMatchObject({
-        forceRefresh: true,
-        reportIds: ["mock:account"],
-      });
+      await expect
+        .poll(() => forcedRefreshRequests(usage))
+        .toEqual([{ forceRefresh: true, reportIds: ["mock:account"] }]);
 
       const pin = tooltip.getByRole("checkbox", { name: /Pin Mock plan Session/ });
       await page.keyboard.press("Tab");

packages/app/src/components/ui/tooltip.tsx

@@ -284,11 +284,23 @@ export function Tooltip({
       return;
     }
     closeTimerRef.current = setTimeout(() => {
-      setIsOpen(false);
       closeTimerRef.current = null;
+      if (
+        isWeb &&
+        typeof document !== "undefined" &&
+        contentRef.current &&
+        (contentRef.current as unknown as HTMLElement).contains(document.activeElement)
+      ) {
+        return;
+      }
+      setIsOpen(false);
     }, 100);
   }, [cancelClose, interactive, setIsOpen]);
-  const focusContent = useCallback(() => focusFirstContentControl(contentRef.current), []);
+  const focusContent = useCallback(() => {
+    const focused = focusFirstContentControl(contentRef.current);
+    if (focused) cancelClose();
+    return focused;
+  }, [cancelClose]);
 
   useEffect(() => cancelClose, [cancelClose]);