Skip to content

Keep dialogs and sheets open on an outside click - #1814

Merged
RhysSullivan merged 1 commit into
mainfrom
issue-1030-dialog-outside-click
Aug 28, 2026
Merged

Keep dialogs and sheets open on an outside click#1814
RhysSullivan merged 1 commit into
mainfrom
issue-1030-dialog-outside-click

Conversation

@RhysSullivan

Copy link
Copy Markdown
Collaborator

Fixes #1030

DialogContent and SheetContent only prevented Radix's outside-interaction dismissal when the click landed in a portaled combobox or select popup, so any other outside click closed the surface and destroyed the form inside it. The default is now the opposite: an outside interaction keeps the surface open, while Escape and the close button still close it. A new dismissOnOutsideClick prop opts a surface back in, and the portaled-popup guard still applies when it does, so choosing a combobox option never dismisses.

Call-site audit

Every DialogContent, SheetContent, and CommandDialog in the repo, and the choice made for each. AlertDialog is not affected — Radix already blocks outside dismissal there.

Opted in with dismissOnOutsideClick (nothing to lose):

Call site Surface Why
packages/react/src/components/command.tsx (CommandDialog) command palette wrapper Holds only a search string; clicking away is how you leave a palette. On by default in the wrapper, so command-palette.tsx needs no change.
packages/react/src/components/sidebar.tsx:170 mobile navigation sheet Navigation only; tapping the page is the normal way to put it away.
packages/react/src/components/remove-oauth-app-dialog.tsx:32 "Remove OAuth app?" confirm Confirm/cancel only.
packages/react/src/pages/org.tsx:450 member-limit upsell Informational.
packages/react/src/pages/admin-users.tsx:673 admin user detail sheet Read-only inspector.
packages/react/src/pages/api-keys.tsx:503 revoke organization key confirm Confirm/cancel only.
apps/cloud/src/web/components/support-slot.tsx:47 "Get support" Static links.
apps/cloud/src/routes/app/billing_.plans.tsx:404 Enterprise contact Static contact details.
apps/cloud/src/routes/app/billing_.plans.tsx:452 Slack contact Static contact details.

Left on the new default (holds state a stray click would destroy):

Call site Surface What is at risk
packages/react/src/components/add-account-modal.tsx:2364 add/edit connection API keys, OAuth client fields, custom auth method builder, wizard step.
packages/react/src/components/metadata-edit-sheet.tsx:109 edit connection Label and description.
packages/react/src/components/metadata-edit-sheet.tsx:238 edit integration Name, description, plugin-supplied section.
packages/react/src/components/health-check-editor.tsx:476 health check editor Operation choice and per-argument fields.
packages/react/src/pages/artifact-rename-dialog.tsx:78 rename artifact Title field.
packages/react/src/pages/integrations.tsx:244 connect an integration Pasted spec URL — the exact copy-paste flow this issue describes.
packages/react/src/pages/api-keys.tsx:324 create personal API key Key name, and the one-time secret reveal.
packages/react/src/pages/api-keys.tsx:482 create organization key Key name, and the one-time secret reveal.
packages/react/src/pages/org.tsx:517 invite member Email and role.
packages/plugins/onepassword/src/react/OnePasswordSettings.tsx:217 1Password settings Auth method, token, vault choice.
packages/plugins/toolkits/src/page.tsx:548 create toolkit Toolkit name.
packages/plugins/toolkits/src/page.tsx:810 manage toolkit connections Search filter and scroll position.
apps/cloud/src/routes/app/org.tsx:154 delete organization Type-to-confirm field.

packages/react/src/components/add-custom-method-modal.tsx renders no surface of its own; it composes into the add-account dialog.

Simplified opt-out

add-account-modal.tsx previously passed a conditional onInteractOutside that prevented dismissal only during an OAuth reconnect handoff. The new default covers every case, so the prop and its handler are gone. modal={false} and forceOverlay stay: they exist to free the mouse wheel for the portaled combobox popup, not to control dismissal. The stale comment about outside clicks closing the dialog is corrected.

Verification

  • packages/react test suite: 43 files, 369 tests passed. Six of those are new, in packages/react/src/lib/outside-dismiss.test.ts, covering the default, the opt-in, the portaled-popup exception, and that a plain outside click is blocked.
  • typecheck clean in packages/react and apps/cloud (only pre-existing suggestions in untouched files).
  • oxlint -c .oxlintrc.jsonc --deny-warnings clean on all changed files; format:check and lint:changelog-stubs pass.
  • e2e/scenarios/health-checks-ui.test.ts already covers the portaled-popup case by clicking a combobox option inside a modal; that guard is preserved, not relaxed. The suite has not been run on this branch.

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
executor-marketing e50cb5e Commit Preview URL

Branch Preview URL
Aug 28 2026, 08:17 AM

@github-actions

github-actions Bot commented Aug 28, 2026

Copy link
Copy Markdown
Contributor

Cloudflare preview

Torn down — the PR is closed.

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Updated (UTC)
✅ Deployment successful!
View logs
executor-cloud e50cb5e Aug 28 2026, 08:18 AM

@pkg-pr-new

pkg-pr-new Bot commented Aug 28, 2026

Copy link
Copy Markdown

Open in StackBlitz

@executor-js/cli

npm i https://pkg.pr.new/@executor-js/cli@1814

@executor-js/config

npm i https://pkg.pr.new/@executor-js/config@1814

@executor-js/execution

npm i https://pkg.pr.new/@executor-js/execution@1814

@executor-js/sdk

npm i https://pkg.pr.new/@executor-js/sdk@1814

@executor-js/codemode-core

npm i https://pkg.pr.new/@executor-js/codemode-core@1814

@executor-js/runtime-quickjs

npm i https://pkg.pr.new/@executor-js/runtime-quickjs@1814

@executor-js/plugin-file-secrets

npm i https://pkg.pr.new/@executor-js/plugin-file-secrets@1814

@executor-js/plugin-graphql

npm i https://pkg.pr.new/@executor-js/plugin-graphql@1814

@executor-js/plugin-keychain

npm i https://pkg.pr.new/@executor-js/plugin-keychain@1814

@executor-js/plugin-mcp

npm i https://pkg.pr.new/@executor-js/plugin-mcp@1814

@executor-js/plugin-onepassword

npm i https://pkg.pr.new/@executor-js/plugin-onepassword@1814

@executor-js/plugin-openapi

npm i https://pkg.pr.new/@executor-js/plugin-openapi@1814

executor

npm i https://pkg.pr.new/executor@1814

commit: e50cb5e

@RhysSullivan
RhysSullivan marked this pull request as ready for review August 28, 2026 18:13
@RhysSullivan
RhysSullivan merged commit 66fb1a4 into main Aug 28, 2026
44 checks passed
@RhysSullivan RhysSullivan mentioned this pull request Aug 28, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

UX: Clicking outside of dialogs should not close them.

1 participant