fix(web): 修复「选择同步渠道」打开弹窗时页面卡死 - #6651
Conversation
Base UI Select portals outside the dialog and fights the modal focus trap, freezing the page when opening the channel picker. Use a native <select> for the sync endpoint column, and mount the dialog only while open.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
WalkthroughThe channel selector now uses a native HTML ChangesChannel selector dialog
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related issues
Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
There was a problem hiding this comment.
Pull request overview
This PR addresses a frontend UI freeze when opening the “Select Sync Channels” dialog in System Settings → Model Pricing → Upstream Price Sync, caused by a Portal-based Select conflicting with the Dialog’s modal focus trap.
Changes:
- Replace the per-row Base UI
Select(Portal-to-body) with a native<select>for the “Sync Endpoint” column. - Mount
ChannelSelectorDialogonly while it is open to avoid initializing the heavy dialog/table when closed.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| web/src/features/system-settings/models/upstream-ratio-sync.tsx | Conditionally mounts the channel selector dialog only when opened. |
| web/src/features/system-settings/models/channel-selector-dialog.tsx | Replaces Portal-based Select with native <select> and adds an aria-label for accessibility. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <select | ||
| className='border-input bg-background h-8 w-32 shrink-0 rounded-md border px-2 text-sm' | ||
| value={endpointType} | ||
| onValueChange={(v) => v !== null && handleTypeChange(v)} | ||
| onChange={(e) => handleTypeChange(e.target.value)} | ||
| aria-label={t('Sync Endpoint')} |
51fdfc5 to
2b6f1df
Compare
📝 变更描述 / Description
现象：在「系统设置 → 模型定价 → 上游价格同步」点击选择同步渠道** 时，浏览器主线程卡死，弹窗打不开, 界面无响应。
根因：弹窗表格每行使用 Base UI
Select，其内容 Portal 到body，与 Dialog 的 modal 焦点陷阱冲突，打开时主线程被拖死。修复：
<select>，不再使用带 Portal 的 Base UI Select范围： 纯前端，2 个文件；无后端改动。
🚀 变更类型 / Type of change
🔗 关联任务 / Related Issue
#6650
✅ 提交前检查项 / Checklist
Bug fix，我已提交或关联对应 Issue，且不会将设计取舍、预期不一致或理解偏差直接归类为 bug。📸 运行证明 / Proof of Work
复现（修复前）：
模型定价 → 上游价格同步 → 点击「选择同步渠道」→ 页面卡死。
验证（修复后）：
同上步骤 → 弹窗立即出现；可搜索/分页/勾选/改 Sync Endpoint/确认。
Summary by CodeRabbit