Skip to content

fix: prevent preview controls from submitting forms - #530

Open
nrps9909 wants to merge 1 commit into
react-component:masterfrom
nrps9909:codex/preview-button-types
Open

fix: prevent preview controls from submitting forms#530
nrps9909 wants to merge 1 commit into
react-component:masterfrom
nrps9909:codex/preview-button-types

Conversation

@nrps9909

@nrps9909 nrps9909 commented Aug 26, 2026

Copy link
Copy Markdown

Summary

  • mark the preview close and previous-image controls as type="button"
  • keep them consistent with the existing next-image and action controls
  • add a regression test covering all three preview navigation/close buttons

Why

A native <button> defaults to type="submit". When a preview portal is mounted into a form through getContainer (or another inline/custom container), clicking Close or Previous can therefore submit the surrounding form. These controls only operate the preview and should never submit form data.

Verification

  • regression before fix: focused suite had 16 passed / 1 failed because Close and Previous had no type
  • focused suite after fix: 17/17 passed
  • full suite: 8/8 suites, 81/81 tests, 1/1 snapshot passed
  • TypeScript: passed
  • ESLint: 0 errors (12 existing warnings outside this change)
  • Prettier check and git diff --check: passed

AI assistance disclosure: Codex assisted with repository screening, duplicate/changed-file checks, test execution, and drafting. I verified the behavior, patch, and results.

Summary by CodeRabbit

  • Bug Fixes
    • 预览窗口中的关闭、上一张和下一张按钮现明确标记为普通按钮,避免在表单中意外触发表单提交。
  • Tests
    • 新增预览控件行为验证,确保相关按钮具备正确的按钮类型属性。

@vercel

vercel Bot commented Aug 26, 2026

Copy link
Copy Markdown

@nrps9909 is attempting to deploy a commit to the afc163's projects Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented Aug 26, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 256bf11b-7dd9-4c2e-9e2b-f2a9b1dd495c

📥 Commits

Reviewing files that changed from the base of the PR and between ca57540 and a589272.

📒 Files selected for processing (3)
  • src/Preview/CloseBtn.tsx
  • src/Preview/PrevNext.tsx
  • tests/previewGroup.test.tsx

Included review availability: Your plan provides up to 2 included reviews per hour; 1 remains after this review.


Walkthrough

预览控件按钮新增 type="button" 属性。PreviewGroup 测试验证关闭、上一页和下一页按钮均使用该类型。

Changes

预览控件按钮类型

Layer / File(s) Summary
按钮类型与测试验证
src/Preview/CloseBtn.tsx, src/Preview/PrevNext.tsx, tests/previewGroup.test.tsx
关闭、上一页和下一页按钮新增 type="button"。新增测试验证三个预览控件的按钮类型。

Estimated code review effort: 1 (简单) | ~5 分钟

Merge Risk: ⚪ Minimal · up to a5892

The preview Close and Previous controls now cannot submit surrounding forms, while navigation and close behavior remains unchanged; no actionable merge-blocking risk remains after normal checks and review.

Poem

小兔看见按钮排成行
关闭、前进、后退都不提交
type="button" 轻轻写上
测试月光照亮每个控件
表单安静,预览继续跳跃

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 3 files. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 标题准确概括了主要变更:为预览控件设置 type="button",以防止控件提交外层表单。
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
  • Fix all pre-merge checks with AI
✨ Finishing Touches 💡 1
🛠️ Fix failing CI checks 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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

Comment @coderabbitai help to get the list of available commands.

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.

1 participant