radix-ng · pimenovoleg · Jun 16, 2026 · Jun 14, 2026 · Jun 14, 2026 · Jun 14, 2026
@@ -9,8 +9,8 @@ import { defineConfig, devices } from '@playwright/test';
  * baselines can coexist — regenerate the Linux set in the official Playwright Docker image when
  * wiring CI.
  */
-const PORT = 4400;
-const BASE_URL = `http://localhost:${PORT}`;
+const PORT = Number(process.env['PLAYWRIGHT_PORT'] ?? 4400);
+const BASE_URL = process.env['PLAYWRIGHT_BASE_URL'] ?? `http://localhost:${PORT}`;
 
 export default defineConfig({
     testDir: './tests',
@@ -38,10 +38,12 @@ export default defineConfig({
             use: { ...devices['Desktop Chrome'] }
         }
     ],
-    webServer: {
-        command: `pnpm exec http-server ../../dist/radix-storybook -p ${PORT} -s -c-1`,
-        url: `${BASE_URL}/index.json`,
-        reuseExistingServer: !process.env.CI,
-        timeout: 120_000
-    }
+    webServer: process.env['PLAYWRIGHT_NO_WEBSERVER']
+        ? undefined
+        : {
+              command: `pnpm exec http-server ../../dist/radix-storybook -p ${PORT} -s -c-1`,
+              url: `${BASE_URL}/index.json`,
+              reuseExistingServer: !process.env.CI,
+              timeout: 120_000
+          }
 });
@@ -14,6 +14,42 @@ const visibleItems = '[rdxAutocompleteItem]:not([hidden])';
 const highlighted = '[rdxAutocompleteItem][data-highlighted]';
 const popup = '[rdxAutocompletePopup]';
 
+/**
+ * ADR 0015/0017 Phase-4 migration of Autocomplete onto the new floating dismissal engine.
+ */
+test.describe('Autocomplete — new floating engine migration', () => {
+    test('Escape closes the autocomplete', async ({ page }) => {
+        await gotoStory(page, 'primitives-autocomplete--default');
+        await page.locator(input).click();
+        await page.locator(input).pressSequentially('f');
+        await expect(page.locator(popup)).toBeVisible();
+
+        await page.keyboard.press('Escape');
+        await expect(page.locator(popup)).toHaveCount(0);
+    });
+
+    test('an outside press closes the autocomplete', async ({ page }) => {
+        await gotoStory(page, 'primitives-autocomplete--default');
+        await page.locator(input).click();
+        await page.locator(input).pressSequentially('f');
+        await expect(page.locator(popup)).toBeVisible();
+
+        await page.mouse.click(5, 5);
+        await expect(page.locator(popup)).toHaveCount(0);
+    });
+
+    test('a press on the input keeps the popup open (the input is registered inside)', async ({ page }) => {
+        await gotoStory(page, 'primitives-autocomplete--default');
+        await page.locator(input).click();
+        await page.locator(input).pressSequentially('f');
+        await expect(page.locator(popup)).toBeVisible();
+
+        // Clicking the input again must not self-dismiss — it is "inside" the floating layer.
+        await page.locator(input).click();
+        await expect(page.locator(popup)).toBeVisible();
+    });
+});
+
 test.describe('Autocomplete auto highlight', () => {
     test('typing a full match highlights the item so Enter selects it', async ({ page }) => {
         await gotoStory(page, 'primitives-autocomplete--auto-highlight');

@@ -30,6 +30,32 @@ test('autocomplete teleports the positioner directly into <body> with no wrapper
     expect(parentTag).toBe('BODY');
 });
 
+/**
+ * ADR 0015/0017 Phase-4 migration of Combobox onto the new floating dismissal engine.
+ */
+test.describe('Combobox — new floating engine migration', () => {
+    const input = '[rdxComboboxInput]';
+    const popup = '[rdxComboboxPopup]';
+
+    test('Escape closes the combobox', async ({ page }) => {
+        await gotoStory(page, 'primitives-combobox--default');
+        await page.locator(input).click();
+        await expect(page.locator(popup)).toBeVisible();
+
+        await page.keyboard.press('Escape');
+        await expect(page.locator(popup)).toHaveCount(0);
+    });
+
+    test('an outside press closes the combobox', async ({ page }) => {
+        await gotoStory(page, 'primitives-combobox--default');
+        await page.locator(input).click();
+        await expect(page.locator(popup)).toBeVisible();
+
+        await page.mouse.click(5, 5);
+        await expect(page.locator(popup)).toHaveCount(0);
+    });
+});
+
 /**
  * Regression: in multiple mode, once focus has stepped into the chips (ArrowLeft from the input),
  * ArrowDown / ArrowUp must hand focus back to the input and engage the list — otherwise the popup

@@ -0,0 +1,67 @@
+import { expect, Page, test } from '@playwright/test';
+
+/**
+ * ADR 0015/0017 Phase-4 migration of Context Menu (composes `RdxMenuRoot`, so it inherits the new
+ * floating dismissal engine) onto a real browser. Context menus open at the cursor via a virtual
+ * anchor; these guard that opening + every dismissal path still works and throws no runtime errors.
+ */
+async function gotoStory(page: Page, storyId: string): Promise<void> {
+    await page.goto(`/iframe.html?id=${storyId}&viewMode=story`);
+    await page.waitForSelector('#storybook-root', { state: 'attached' });
+}
+
+const trigger = '[rdxContextMenuTrigger]';
+const popup = '[rdxMenuPopup]';
+
+async function openAtTrigger(page: Page): Promise<void> {
+    await page.locator(trigger).first().click({ button: 'right' });
+    await expect(page.locator(popup)).toBeVisible();
+}
+
+test('right-click opens the context menu without runtime errors', async ({ page }) => {
+    const errors: string[] = [];
+    page.on('pageerror', (e) => errors.push(String(e)));
+    await gotoStory(page, 'primitives-context-menu--default');
+
+    await openAtTrigger(page);
+    expect(errors).toEqual([]);
+});
+
+test('Escape closes the context menu', async ({ page }) => {
+    await gotoStory(page, 'primitives-context-menu--default');
+    await openAtTrigger(page);
+
+    await page.keyboard.press('Escape');
+    await expect(page.locator(popup)).toHaveCount(0);
+});
+
+test('a modal context menu renders an internal backdrop (finding #1)', async ({ page }) => {
+    await gotoStory(page, 'primitives-context-menu--default');
+    await openAtTrigger(page);
+
+    await expect(page.locator('[data-rdx-menu-internal-backdrop]')).toHaveCount(1);
+});
+
+test('a modal context menu traps focus — a focus-out does not close it (finding #3)', async ({ page }) => {
+    await gotoStory(page, 'primitives-context-menu--default');
+    await openAtTrigger(page);
+
+    // Programmatically move focus to an element outside the menu. A context menu is the one menu kind
+    // that TRAPS focus (Base UI `FloatingFocusManager modal`), so focus is pulled back and it stays open.
+    await page.evaluate(() => {
+        const b = document.createElement('button');
+        b.id = 'cm-outside';
+        document.body.appendChild(b);
+        b.focus();
+    });
+    await page.waitForTimeout(120); // let the async focus-out check settle
+    await expect(page.locator(popup)).toBeVisible();
+});
+
+test('an outside press closes the context menu', async ({ page }) => {
+    await gotoStory(page, 'primitives-context-menu--default');
+    await openAtTrigger(page);
+
+    await page.mouse.click(5, 5);
+    await expect(page.locator(popup)).toHaveCount(0);
+});