@@ -1,5 +1,6 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { createRequire } from 'node:module';
 import { beforeAll, describe, expect, it, vi } from 'vitest';
 import { MultiRoleCombobox } from './MultiRoleCombobox';
 
@@ -20,16 +21,18 @@ const CUSTOM_ROLES = [
   { id: 'orole_1', name: 'Security Reviewer', permissions: { control: ['read'] } },
 ];
 
-describe('MultiRoleCombobox (CS-748)', () => {
-  it('forces pointer-events on the popover content so roles stay clickable inside a modal dialog', async () => {
-    // This combobox is used inside the modal "Add User" Radix Dialog, which
-    // locks `body { pointer-events: none }`. A Radix dismissable-layer version
-    // skew (react-dialog -> 1.1.15 vs react-popover -> 1.1.11) puts the two in
-    // separate module-level layer contexts, so the portaled popover never
-    // re-enables pointer events and its role items inherit `none` — unclickable
-    // and unhoverable. The fix forces pointer-events on the content. jsdom can't
-    // hit-test, so we assert the fix is present here; the end-to-end click
-    // behavior inside the modal is verified in a real browser.
+describe('MultiRoleCombobox (CS-748 / CS-755)', () => {
+  it('opens as a modal popover so cmdk role items stay interactive inside a modal dialog', async () => {
+    // This combobox renders inside the modal "Add User" / "Edit Roles" Radix
+    // Dialog. A non-modal popover dismisses itself whenever focus lands outside
+    // its content, and the Dialog's focus trap yanks focus out the moment the
+    // popover autofocuses its search input — in Safari (which never focuses
+    // buttons on click) that focus lands on a non-trigger element, so the
+    // picker closed the instant it opened. That repro is browser-only — jsdom
+    // click tests pass even when the flow is broken (which is why CS-748
+    // shipped a fix that didn't hold and CS-755 reopened it). The fix is a
+    // *modal* Popover, and the observable DOM contract of a modal Radix
+    // dismissable layer is that it disables outside pointer events on the body.
     const user = userEvent.setup();
     render(
       <MultiRoleCombobox
@@ -43,11 +46,40 @@ describe('MultiRoleCombobox (CS-748)', () => {
 
     await user.click(screen.getByRole('combobox'));
 
+    // Only a modal dismissable layer locks the rest of the page. A non-modal
+    // popover leaves the body untouched, so this fails before the fix.
+    await waitFor(() => {
+      expect(document.body.style.pointerEvents).toBe('none');
+    });
+
+    // ...and the modal layer re-enables pointer events on its own content, so
+    // the role items remain clickable.
     const content = document.querySelector('[data-slot="popover-content"]');
     expect(content).not.toBeNull();
     expect(content).toHaveStyle({ pointerEvents: 'auto' });
   });
 
+  it('popover and dialog share one copy of the Radix layer/focus singleton modules', () => {
+    // Root cause of CS-748/CS-755: packages/ui pinned @radix-ui/react-popover
+    // to a version whose react-dismissable-layer / react-focus-scope deps
+    // differed from react-dialog's, so two copies were installed and bundled.
+    // These modules coordinate through module-level singletons (layer stack,
+    // focus-scope stack) — with two copies, dialog and popover cannot see each
+    // other's layers: Escape closed both, the two focus traps fought, and in
+    // Safari the picker dismissed itself on open. `modal` only behaves
+    // correctly when both primitives resolve to the SAME module instance, so
+    // assert module identity against the installed tree (this fails if a
+    // future version bump reintroduces the skew).
+    const req = createRequire(import.meta.url);
+    const resolveDep = (fromPkg: string, dep: string) =>
+      createRequire(req.resolve(fromPkg)).resolve(dep);
+    for (const dep of ['@radix-ui/react-dismissable-layer', '@radix-ui/react-focus-scope']) {
+      expect(resolveDep('@radix-ui/react-popover', dep)).toBe(
+        resolveDep('@radix-ui/react-dialog', dep),
+      );
+    }
+  });
+
   it('selects a built-in role when clicked', async () => {
     const handleChange = vi.fn();
     const user = userEvent.setup();
 
@@ -154,7 +154,18 @@ export function MultiRoleCombobox({
   });
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    // `modal` is required: this Popover renders inside the modal "Add User" /
+    // "Edit Roles" Radix Dialog. A non-modal popover dismisses itself on any
+    // focus outside its content, and the Dialog's focus trap yanks focus out
+    // the moment the popover autofocuses its search input. In Safari (which,
+    // unlike Chrome, never focuses buttons on click) that focus lands on a
+    // non-trigger element, so the picker closed the instant it opened
+    // (CS-748/CS-755). `modal` opts out of focus-outside dismissal and traps
+    // focus in the popover. Matches packages/ui combobox-dropdown.tsx. This
+    // only works while react-popover and react-dialog share one copy of the
+    // Radix focus-scope/dismissable-layer singletons — guarded by the module
+    // identity test in MultiRoleCombobox.test.tsx.
+    <Popover open={open} onOpenChange={setOpen} modal>
       <PopoverTrigger asChild>
         <div>
           <MultiRoleComboboxTrigger
@@ -169,22 +180,7 @@ export function MultiRoleCombobox({
           />
         </div>
       </PopoverTrigger>
-      {/*
-        This Popover is portaled to <body> while rendered inside a modal Radix
-        Dialog (the invite "Add User" dialog). The Dialog locks
-        `body { pointer-events: none }`, and a Radix version skew
-        (react-dialog -> react-dismissable-layer@1.1.15 vs
-        react-popover -> react-dismissable-layer@1.1.11) means the two live in
-        separate module-level layer contexts, so the popover never re-enables
-        pointer events on itself and its items inherit `none` — making every
-        role unclickable/unhoverable. Forcing pointer-events here restores
-        interactivity for the whole popover subtree. See CS-748.
-      */}
-      <PopoverContent
-        className="w-[280px] p-0"
-        align="start"
-        style={{ pointerEvents: 'auto' }}
-      >
+      <PopoverContent className="w-[280px] p-0" align="start">
         <MultiRoleComboboxContent
           searchTerm={searchTerm}
           setSearchTerm={setSearchTerm}