跳到主要内容

Dialog 点击蒙层默认不再关闭（WEB-1125）

版本： 0.6.2 · 类型： 🐛 缺陷修复

WEB-1125

问题​

Dialog 此前点击蒙层默认关闭（沿用 Radix Dialog 原生行为），但 apps/web4 内绝大多数业务弹窗（MFA 登录、密码重置成功、policy 更新、speaker 冲突确认、支付确认等约 10 处）都手动加了 onInteractOutside / onPointerDownOutside + preventDefault() 来关掉这一行为；历史 web3 / @plaud/ui-components 的 Modal 也统一以 closeOnClickModal={false} 为主（仅 1-2 处例外）。改为组件库统一默认不关闭，避免各业务方重复 hack。

改动文件​

  • 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

改动内容​

  1. DialogProps / DialogOpenOptions 新增 closeOnOverlayClick?: boolean，默认 false
  2. DialogView 内部为 DialogContent 默认绑定 onPointerDownOutside，closeOnOverlayClick 为 false 时调用 preventDefault() 阻止关闭；业务方自行传入 contentProps.onPointerDownOutside / onInteractOutside 时仍完全按调用方逻辑执行（不受影响，向后兼容既有 override）
  3. ESC、关闭按钮关闭行为不变，仍由 Radix 默认行为承担
  4. 补充单测覆盖默认不关闭 / closeOnOverlayClick 开启后关闭两种场景