fix: combobox works inside the health-check editor sheet

RhysSullivan · RhysSullivan · commit fdcf79771a34 · 2026-06-23T11:28:06.000-07:00
The operation/identity comboboxes portal their popup to &lt;body&gt;, outside the
sheet's dialog subtree, so a modal Radix sheet froze them: body pointer-events
were disabled (no click/select) and react-remove-scroll locked wheel scroll.

- The editor sheet is non-modal, dropping both locks while keeping the overlay.
- The popup gets pointer-events:auto (defensive for any modal-dialog combobox).
- The sheet keeps itself open when an interaction originates inside a combobox
  popup, so clicking an option doesn't dismiss it.

Adds e2e guards that click and wheel-scroll the popup inside the sheet.
diff --git a/e2e/scenarios/health-checks-ui.test.ts b/e2e/scenarios/health-checks-ui.test.ts
@@ -819,3 +819,144 @@ scenario(
     }),
   ),
 );
+
+// ===========================================================================
+// 6. Edit sheet, click interaction: the combobox popup is portaled outside the
+//    Radix sheet, so clicking an option must not be treated as an outside
+//    interaction that dismisses the sheet (keyboard scenarios above miss this).
+// ===========================================================================
+
+scenario(
+  "Health checks (UI) · clicking a combobox option in the sheet selects it without closing the sheet",
+  {},
+  Effect.scoped(
+    Effect.gen(function* () {
+      const target = yield* Target;
+      const browser = yield* Browser;
+      const { client: makeClient } = yield* Api;
+      const identity = yield* target.newIdentity();
+      const client = yield* makeClient(api, identity);
+      const slug = newSlug("hc-ui-click");
+
+      yield* Effect.ensuring(
+        Effect.gen(function* () {
+          yield* registerIdentityIntegration(client, slug, "https://identity.example.com");
+          const operation = yield* getMeOperation(client, slug);
+
+          yield* browser.session(identity, async ({ page, step }) => {
+            const sheet = page.getByRole("dialog");
+            const operationInput = page.locator("#health-check-operation");
+            const identityInput = page.locator("#health-check-identity");
+
+            await step("Open the health-check editor", async () => {
+              await page.goto(`/integrations/${slug}`, { waitUntil: "networkidle" });
+              await page.getByRole("heading", { level: 3, name: "Health check" }).waitFor();
+              await page.getByRole("button", { name: "Set up" }).click();
+              await operationInput.waitFor();
+            });
+
+            await step(
+              "Click the operation option: it selects and the sheet stays open",
+              async () => {
+                await operationInput.click();
+                await page.getByRole("option").filter({ hasText: "getMe" }).first().click();
+                // Clicking the portaled popup option must NOT dismiss the sheet.
+                await sheet.waitFor();
+                expect(await operationInput.inputValue()).toContain("getMe");
+              },
+            );
+
+            await step("Click the identity option by mouse, then save", async () => {
+              await identityInput.click();
+              await page.getByRole("option").filter({ hasText: "email" }).first().click();
+              await sheet.waitFor();
+              expect(await identityInput.inputValue()).toBe("email");
+              await page.getByRole("button", { name: "Save", exact: true }).click();
+              await operationInput.waitFor({ state: "hidden" });
+            });
+          });
+
+          // The mouse-driven selections persisted: only possible if the option
+          // clicks selected without dismissing the sheet first.
+          const stored = yield* client.integrations.healthCheckGet({ params: { slug } });
+          expect(stored).toEqual({ operation, identityField: "email" });
+        }),
+        client.openapi.removeSpec({ params: { slug } }).pipe(Effect.ignore),
+      );
+    }),
+  ),
+);
+
+// ===========================================================================
+// 7. Edit sheet, scroll: a modal dialog locks body scroll, which freezes the
+//    portaled combobox list. The editor sheet is non-modal so the list scrolls.
+// ===========================================================================
+
+scenario(
+  "Health checks (UI) · the combobox list scrolls inside the edit sheet",
+  {},
+  Effect.scoped(
+    Effect.gen(function* () {
+      const target = yield* Target;
+      const browser = yield* Browser;
+      const { client: makeClient } = yield* Api;
+      const identity = yield* target.newIdentity();
+      const client = yield* makeClient(api, identity);
+      const slug = newSlug("hc-ui-scroll");
+
+      yield* Effect.ensuring(
+        Effect.gen(function* () {
+          // Many operations so the popup list overflows and must scroll.
+          yield* client.openapi.addSpec({
+            payload: {
+              spec: { kind: "blob", value: largeSpec("https://big.example.com") },
+              slug,
+              baseUrl: "https://big.example.com",
+              authenticationTemplate: [
+                {
+                  slug: "apiKey",
+                  type: "apiKey",
+                  headers: { authorization: ["Bearer ", { type: "variable", name: "token" }] },
+                },
+              ],
+            },
+          });
+
+          yield* browser.session(identity, async ({ page, step }) => {
+            const operationInput = page.locator("#health-check-operation");
+            const list = page.locator("[data-slot='combobox-list']").first();
+
+            await step("Open the operation combobox in the sheet", async () => {
+              await page.goto(`/integrations/${slug}`, { waitUntil: "networkidle" });
+              await page.getByRole("heading", { level: 3, name: "Health check" }).waitFor();
+              await page.getByRole("button", { name: "Set up" }).click();
+              await operationInput.waitFor();
+              await operationInput.click();
+              await list.waitFor();
+            });
+
+            await step("Wheel-scroll the list: it actually moves (not scroll-locked)", async () => {
+              const before = await list.evaluate((el) => el.scrollTop);
+              await list.hover();
+              await page.mouse.wheel(0, 600);
+              // Poll: the wheel scroll must move the list (blocked → stays 0).
+              await page.waitForFunction(
+                (start) => {
+                  const el = document.querySelector("[data-slot='combobox-list']");
+                  return el != null && el.scrollTop > start + 20;
+                },
+                before,
+                { timeout: 5000 },
+              );
+              const after = await list.evaluate((el) => el.scrollTop);
+              expect(after, "the list scrolled past its starting offset").toBeGreaterThan(before);
+              // The sheet stayed open through the scroll interaction.
+              await page.getByRole("dialog").waitFor();
+            });
+          });
+        }),
+        client.openapi.removeSpec({ params: { slug } }).pipe(Effect.ignore),
+      );
+    }),
+  ),
+);
diff --git a/packages/react/src/components/combobox.tsx b/packages/react/src/components/combobox.tsx
@@ -103,7 +103,11 @@ function ComboboxContent({
         align={align}
         alignOffset={alignOffset}
         anchor={anchor}
-        className="isolate z-50"
+        // `pointer-events-auto` re-enables interaction when the popup is portaled
+        // out of a modal dialog (Radix sets `pointer-events: none` on the body
+        // for modal dialogs/sheets; without this the portaled list can't be
+        // scrolled or clicked). Harmless outside a dialog (auto is the default).
+        className="isolate z-50 pointer-events-auto"
       >
         <ComboboxPrimitive.Popup
           data-slot="combobox-content"
diff --git a/packages/react/src/components/health-check-editor.tsx b/packages/react/src/components/health-check-editor.tsx
@@ -483,7 +483,12 @@ function HealthCheckEditorSheet(props: {
   const canPreview = livePreview !== undefined && livePreview.templates.length > 0;
 
   return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
+    // Non-modal: a modal Radix dialog locks body scroll (react-remove-scroll)
+    // and disables outside pointer events, which kills the combobox popup
+    // (portaled to <body>, outside the dialog subtree) - it can't be scrolled or
+    // clicked. The overlay still renders and the dismissal guard still keeps the
+    // sheet open while interacting with the popup.
+    <Sheet open={open} onOpenChange={onOpenChange} modal={false}>
       <SheetContent side="right">
         <SheetHeader>
           <SheetTitle>Health check</SheetTitle>
diff --git a/packages/react/src/components/sheet.tsx b/packages/react/src/components/sheet.tsx
@@ -38,11 +38,18 @@ function SheetOverlay({
   );
 }
 
+// base-ui popups (combobox/select) portal their list OUTSIDE the dialog content,
+// so clicking an option reads as an interaction outside the sheet and would
+// dismiss it before the selection lands. Keep the sheet open for interactions
+// that originate inside such a popup.
+const PORTALED_POPUP_SELECTOR = "[data-slot='combobox-content'],[data-slot='select-content']";
+
 function SheetContent({
   className,
   children,
   side = "right",
   showCloseButton = true,
+  onInteractOutside,
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
   side?: "top" | "right" | "bottom" | "left";
@@ -53,6 +60,13 @@ function SheetContent({
       <SheetOverlay />
       <SheetPrimitive.Content
         data-slot="sheet-content"
+        onInteractOutside={(event) => {
+          const target = event.detail.originalEvent.target;
+          if (target instanceof Element && target.closest(PORTALED_POPUP_SELECTOR)) {
+            event.preventDefault();
+          }
+          onInteractOutside?.(event);
+        }}
         className={cn(
           "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
           side === "right" &&
