fix: 端点 Dialog 表单 submit 事件冒泡导致外层编辑 Dialog 意外关闭

[NieiR]

Summary

Fixes nested dialog form submit event bubbling that caused the outer edit dialog to unexpectedly close when submitting the inner endpoint add/edit dialog in the provider management UI.

Problem

In the provider management interface, when editing a provider and clicking "Add Endpoint" to open the nested dialog, filling in the form and clicking "Create" would unexpectedly close the outer edit dialog and return to the provider list. The expected behavior is for only the inner dialog to close, keeping the edit dialog open.

Root Cause: React synthetic events bubble through the component tree (not the DOM tree). The <form> elements in AddEndpointButton and EditEndpointDialog are rendered to document.body via Radix UI Portal, but in React's virtual tree they remain descendants of the outer ProviderFormContent's <form>. The inner form's handleSubmit only called e.preventDefault() without e.stopPropagation(), causing the submit event to bubble to the outer <form onSubmit={handleSubmit}>, triggering the provider save flow which called onSuccess() to close the edit dialog.

Solution

Add e.stopPropagation() to the handleSubmit functions in both AddEndpointButton and EditEndpointDialog to prevent submit events from bubbling up.

Changes

File	Change
src/app/[locale]/settings/providers/_components/provider-endpoints-table.tsx	Added e.stopPropagation() to two handleSubmit functions (+2 lines)

Testing

Manual Testing

1. Navigate to provider management page (list view)
2. Click the edit button on a provider to open the edit dialog
3. In the endpoint pool section within the edit dialog, click "Add Endpoint"
4. Fill in endpoint information and click "Create"
5. Expected: Inner add endpoint dialog closes, outer edit dialog remains open
6. Similarly verify the endpoint edit dialog behavior

Checklist

• Target branch is dev
• bun run typecheck passed
• bun run lint passed
• No direct conflicts with main

---

Note: This PR modifies provider-endpoints-table.tsx which is also modified in PR #919. Reviewers should be aware of potential merge conflicts.

---

Description enhanced by Claude AI

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

此拉取请求旨在解决一个用户体验问题，即在供应商管理界面中，当用户在内嵌的“添加端点”或“编辑端点”Dialog 中提交表单时，外层的供应商编辑 Dialog 会意外关闭。通过阻止内层表单的 submit 事件冒泡到外层表单，确保了内嵌 Dialog 关闭后，用户仍能停留在供应商编辑页面，从而提升了操作的流畅性和用户预期的一致性。

Highlights

• 修复表单事件冒泡: 解决了内嵌 Dialog 表单 submit 事件冒泡导致外层编辑 Dialog 意外关闭的问题。

Changelog

• src/app/[locale]/settings/providers/_components/provider-endpoints-table.tsx
  • 在 AddEndpointButton 和 EditEndpointDialog 组件的 handleSubmit 函数中添加了 e.stopPropagation()，以阻止 submit 事件向上冒泡。

Activity

• bun run typecheck 已通过。
• bun run lint 已通过。
• 与 main 分支无直接冲突。

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[coderabbitai]

📝 Walkthrough

走查概览

在提供商端点表组件中，向 AddEndpointButton 和 EditEndpointDialog 的表单提交处理器各添加了一行事件传播阻止代码。

变更

cohort / 文件	摘要
事件传播阻止 src/app/[locale]/settings/providers/_components/provider-endpoints-table.tsx	在 AddEndpointButton 和 EditEndpointDialog 表单提交处理器中各添加 e.stopPropagation()，防止事件冒泡。

估计代码审查工作量

🎯 1 (Trivial) | ⏱️ ~3 分钟

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR标题准确概括了主要改动：修复端点Dialog表单submit事件冒泡导致外层编辑Dialog意外关闭的问题。标题简洁清晰，直指核心问题。
Description check	✅ Passed	PR描述详细解释了问题、根本原因和解决方案，与代码更改完全相关。

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Code Review

此 PR 解决了内嵌 Dialog 表单的 submit 事件冒泡问题。该问题会导致外层的编辑 Dialog 意外关闭。通过在 AddEndpointButton 和 EditEndpointDialog 组件的 handleSubmit 事件处理器中调用 e.stopPropagation()，阻止了 submit 事件向组件树上层传播。此更改隔离了内层表单的提交行为，避免了对外层表单的意外影响。

[github-actions]

Code Review Summary

No significant issues identified in this PR.

PR Size: XS

• Lines changed: 2
• Files changed: 1

Analysis

This PR correctly fixes a React synthetic event bubbling issue where nested Dialog forms (via Radix UI Portals) trigger parent form submission. The fix adds e.stopPropagation() to prevent the submit event from propagating up the React component tree.

Root cause correctly identified: Radix UI Portal renders Dialog content to document.body in the DOM, but the element remains a descendant in React's virtual tree, causing synthetic events to bubble through the component hierarchy rather than the DOM tree.

Fix is appropriate:

• e.preventDefault() prevents default form submission
• e.stopPropagation() prevents React synthetic event from bubbling to ancestor form handlers

This is a well-established pattern for nested forms in React applications using Portal-based dialogs.

Review Coverage

• Logic and correctness - Clean
• Security (OWASP Top 10) - Clean
• Error handling - Clean
• Type safety - Clean
• Documentation accuracy - Clean
• Test coverage - Adequate (existing tests cover form submission behavior)
• Code clarity - Good

---

Automated review by Claude AI