From c9e84b7c93a2afa14bedb074c1e8703e2ffcd630 Mon Sep 17 00:00:00 2001
From: laaichiu <134155205+laaichiu@users.noreply.github.com>
Date: Sat, 20 Jun 2026 13:34:01 +0800
Subject: [PATCH] fix(api-keys): keep assigned account picker from closing
 dialog

Set the assigned-account dropdown to non-modal mode so its portaled menu does not trigger the parent API key dialog's outside-dismiss handling when focus returns to the form.

Update the edit-dialog regression test to select accounts and click another in-dialog control before saving, proving the draft remains saveable without pressing Escape first.
---
 .../components/account-multi-select.tsx         |  2 +-
 .../components/api-key-edit-dialog.test.tsx     |  7 +++++--
 .../.openspec.yaml                              |  2 ++
 .../proposal.md                                 | 14 ++++++++++++++
 .../specs/api-keys/spec.md                      | 17 +++++++++++++++++
 .../tasks.md                                    |  3 +++
 6 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 openspec/changes/fix-api-key-assigned-account-dialog-dismissal/.openspec.yaml
 create mode 100644 openspec/changes/fix-api-key-assigned-account-dialog-dismissal/proposal.md
 create mode 100644 openspec/changes/fix-api-key-assigned-account-dialog-dismissal/specs/api-keys/spec.md
 create mode 100644 openspec/changes/fix-api-key-assigned-account-dialog-dismissal/tasks.md

diff --git a/frontend/src/features/api-keys/components/account-multi-select.tsx b/frontend/src/features/api-keys/components/account-multi-select.tsx
index fe96b144a..6a3e0c301 100644
--- a/frontend/src/features/api-keys/components/account-multi-select.tsx
+++ b/frontend/src/features/api-keys/components/account-multi-select.tsx
@@ -178,7 +178,7 @@ export function AccountMultiSelect({
 
   return (
     <div className="space-y-1.5">
-      <DropdownMenu>
+      <DropdownMenu modal={false}>
         <DropdownMenuTrigger asChild>
           <Button
             type="button"
diff --git a/frontend/src/features/api-keys/components/api-key-edit-dialog.test.tsx b/frontend/src/features/api-keys/components/api-key-edit-dialog.test.tsx
index 4b2227fe2..6ad916c53 100644
--- a/frontend/src/features/api-keys/components/api-key-edit-dialog.test.tsx
+++ b/frontend/src/features/api-keys/components/api-key-edit-dialog.test.tsx
@@ -140,6 +140,7 @@ describe("ApiKeyEditDialog", () => {
   it("submits selected assigned accounts", async () => {
     const user = userEvent.setup();
     const onSubmit = vi.fn().mockResolvedValue(undefined);
+    const onOpenChange = vi.fn();
     server.use(
       http.get("/api/accounts", () =>
         HttpResponse.json({
@@ -160,7 +161,7 @@ describe("ApiKeyEditDialog", () => {
         open
         busy={false}
         apiKey={createApiKey()}
-        onOpenChange={vi.fn()}
+        onOpenChange={onOpenChange}
         onSubmit={onSubmit}
       />,
     );
@@ -168,7 +169,9 @@ describe("ApiKeyEditDialog", () => {
     await user.click(await screen.findByRole("button", { name: "All accounts" }));
     await user.click(screen.getByRole("menuitemcheckbox", { name: /primary@example\.com/i }));
     await user.click(screen.getByRole("menuitemcheckbox", { name: /secondary@example\.com/i }));
-    await user.keyboard("{Escape}");
+    await user.click(screen.getByPlaceholderText("e.g. gpt-5.3-codex"));
+    expect(onOpenChange).not.toHaveBeenCalled();
+
     await user.click(screen.getByRole("button", { name: "Save" }));
 
     await waitFor(() => {
diff --git a/openspec/changes/fix-api-key-assigned-account-dialog-dismissal/.openspec.yaml b/openspec/changes/fix-api-key-assigned-account-dialog-dismissal/.openspec.yaml
new file mode 100644
index 000000000..18edba1f5
--- /dev/null
+++ b/openspec/changes/fix-api-key-assigned-account-dialog-dismissal/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-06-20
diff --git a/openspec/changes/fix-api-key-assigned-account-dialog-dismissal/proposal.md b/openspec/changes/fix-api-key-assigned-account-dialog-dismissal/proposal.md
new file mode 100644
index 000000000..a1253513b
--- /dev/null
+++ b/openspec/changes/fix-api-key-assigned-account-dialog-dismissal/proposal.md
@@ -0,0 +1,14 @@
+# fix-api-key-assigned-account-dialog-dismissal
+
+## Summary
+
+Fix the API key edit dialog so selecting assigned accounts does not make the dialog dismiss before the operator can save.
+
+## Motivation
+
+The Assigned accounts picker is rendered inside the edit dialog but uses a portaled dropdown. After selecting an account, subsequent clicks can be treated as an outside interaction by the dialog stack, closing the edit dialog and discarding the pending assignment change before Save can be clicked.
+
+## Scope
+
+- Frontend API key edit/create account picker interaction only.
+- No backend contract or database changes.
diff --git a/openspec/changes/fix-api-key-assigned-account-dialog-dismissal/specs/api-keys/spec.md b/openspec/changes/fix-api-key-assigned-account-dialog-dismissal/specs/api-keys/spec.md
new file mode 100644
index 000000000..4aeb0e7a1
--- /dev/null
+++ b/openspec/changes/fix-api-key-assigned-account-dialog-dismissal/specs/api-keys/spec.md
@@ -0,0 +1,17 @@
+## MODIFIED Requirements
+
+### Requirement: Frontend API Key management
+
+The SPA settings page SHALL include an API Key management section with: a toggle for `apiKeyAuthEnabled`, a key list table showing prefix/name/models/limit/usage/expiry/status, a create dialog (name, model selection, assigned-account selection, weekly limit, expiry date), and key actions (edit, delete, regenerate). On key creation, the SPA MUST display the plain key in a copy-able dialog with a warning that it will not be shown again, and the copy action MUST remain functional in secure and non-secure contexts.
+
+The create and edit dialogs SHALL expose an `Apply to codex /model` checkbox directly below `Allowed models`. The checkbox SHALL default to unchecked for new keys and SHALL edit the stored API key value for existing keys.
+
+The Assigned accounts picker inside API key create and edit dialogs MUST NOT dismiss the parent dialog while the operator is selecting accounts or moving focus back to other controls in the same dialog. The pending assigned-account selection MUST remain saveable through the dialog's Save action.
+
+#### Scenario: Edit assigned accounts remains saveable
+
+- **WHEN** an admin opens the edit API key dialog
+- **AND** selects one or more accounts from the Assigned accounts picker
+- **AND** clicks another control in the same dialog without first pressing Escape
+- **THEN** the edit dialog remains open
+- **AND** clicking Save submits the selected assigned account IDs
diff --git a/openspec/changes/fix-api-key-assigned-account-dialog-dismissal/tasks.md b/openspec/changes/fix-api-key-assigned-account-dialog-dismissal/tasks.md
new file mode 100644
index 000000000..aced8bef0
--- /dev/null
+++ b/openspec/changes/fix-api-key-assigned-account-dialog-dismissal/tasks.md
@@ -0,0 +1,3 @@
+- [x] Keep the Assigned accounts dropdown from dismissing the parent API key dialog during account selection.
+- [x] Add regression coverage for selecting assigned accounts and saving without first pressing Escape.
+- [ ] Validate the frontend tests and OpenSpec specs.