Skip to main content

Dialog overlay click no longer closes by default (WEB-1125)

Version: 0.6.2 ยท Type: ๐Ÿ› Bug Fix

WEB-1125

Problemโ€‹

Dialog previously closed on overlay click by default (inheriting Radix Dialog's native behavior), but most business dialogs in apps/web4 (MFA login, password reset success, policy update, speaker conflict confirmation, payment confirmation, etc. โ€” roughly 10 places) manually added onInteractOutside / onPointerDownOutside + preventDefault() to disable it. The legacy web3 / @plaud/ui-components Modal also defaulted to closeOnClickModal={false} almost everywhere. Changed to a unified library-level default of not closing, avoiding repeated per-consumer hacks.

Changed Filesโ€‹

  • packages/design/src/components/Dialog/Dialog.tsx
  • packages/design/src/components/Dialog/__tests__/Dialog.test.tsx
  • packages/design/src/components/Dialog/DialogDesignSpec.md
  • packages/design-site/docs/components/dialog.mdx
  • packages/design-site/i18n/zh-CN/docusaurus-plugin-content-docs/current/components/dialog.mdx

Changesโ€‹

  1. Added closeOnOverlayClick?: boolean to DialogProps / DialogOpenOptions, default false
  2. DialogView binds onPointerDownOutside to DialogContent by default; calls preventDefault() when closeOnOverlayClick is false to block closing. Callers that already pass their own contentProps.onPointerDownOutside / onInteractOutside keep their own logic fully in effect (backward compatible with existing overrides)
  3. Escape key and close button behavior unchanged, still handled by Radix defaults
  4. Added unit tests covering both the default no-close behavior and the closeOnOverlayClick-enabled close behavior