fix: prevent parent scroll on keyboard navigation in preview

[waterWang]

Description

When the Image preview is open and the user presses LEFT/RIGHT arrow keys to switch images, the browser's default scroll behavior was not prevented. This caused the parent element to scroll instead of the Image preview navigating between images.

Root Cause

The onKeyDown handler in Preview/index.tsx handles LEFT/RIGHT arrow keys to navigate between images, but does not call event.preventDefault(). The browser's default behavior for arrow keys is to scroll the scrollable parent element.

Fix

Added event.preventDefault() when handling LEFT and RIGHT key events in the Preview component, preventing the browser's default scroll behavior.

Related Issue

Closes ant-design/ant-design#56290 — Image 键盘切换图片，外部元素会跟着滚动

Summary by CodeRabbit

• Bug 修复
  • 优化预览中的左右方向键操作，避免触发浏览器默认行为。

[gemini-code-assist]

Caution

The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased.

[vercel]

@waterWang 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]

Walkthrough

预览组的左右方向键处理新增 event.preventDefault() 调用。浏览器不再因键盘导航触发外部元素滚动。

Changes

预览键盘导航

Layer / File(s)	Summary
阻止方向键默认行为 src/Preview/index.tsx	预览组处理左、右方向键后调用 event.preventDefault()。

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

Suggested reviewers: qdyanbing

Poem

兔子按键跳呀跳，
左右切图不乱跑。
默认滚动停一停，
预览画面稳稳好。

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	标题准确描述了阻止预览键盘导航触发父元素滚动的主要变更。
Linked Issues check	✅ Passed	代码为左右方向键调用 event.preventDefault()，满足问题 #56290 中防止父级 div 滚动的要求。
Out of Scope Changes check	✅ Passed	变更仅涉及预览键盘导航的默认行为，未发现与问题 #56290 无关的代码修改。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ 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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

🧹 Nitpick comments (1)

src/Preview/index.tsx (1)

351-354: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

为方向键默认行为增加回归断言。

现有 tests/previewGroup.test.tsx 只验证图片切换，没有验证 event.defaultPrevented。请为 LEFT 和 RIGHT 事件增加断言，确保后续改动不会移除 event.preventDefault()。

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/Preview/index.tsx` around lines 351 - 354, 在 tests/previewGroup.test.tsx
的方向键事件测试中，为 LEFT 和 RIGHT 两种按键分别增加 event.defaultPrevented 断言，确保触发图片切换时仍调用
event.preventDefault()；保留现有图片切换断言不变。

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@src/Preview/index.tsx`:
- Around line 351-354: 在 tests/previewGroup.test.tsx 的方向键事件测试中，为 LEFT 和 RIGHT
两种按键分别增加 event.defaultPrevented 断言，确保触发图片切换时仍调用
event.preventDefault()；保留现有图片切换断言不变。

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: d36a4d48-b6b1-4645-ba05-12ec05679cfd

📥 Commits

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

📒 Files selected for processing (1)

• src/Preview/index.tsx

[nrps9909]

Reviewed exact head 8ee1abcd9d73b24a019d962933e8fdcce8997f5e.

The change is correctly scoped to an open group preview: LEFT/RIGHT still perform the existing image navigation and now cancel the browser's default scrolling behavior after that navigation. Single-image/non-group previews do not enter this branch, and unrelated keys remain uncancelled. I also checked the first/last-image boundary behavior; cancelling LEFT/RIGHT while the modal owns keyboard navigation is consistent even when there is no further image in that direction.

Validation performed on this exact head:

• npm test -- tests/previewGroup.test.tsx --runInBand — 16/16 passed
• npm test -- --runInBand — 80/80 passed, 1/1 snapshot
• independent temporary probe — before opening, RIGHT was not cancelled; in an open group preview, RIGHT and LEFT were cancelled while navigating 1/2 → 2/2 → 1/2; UP remained uncancelled
• npm run tsc — passed
• npm run lint -- --no-fix — 0 errors (12 pre-existing warnings)
• npx prettier --check src/Preview/index.tsx — passed
• npm run build — passed
• git diff --check ca5754037261b89a60681bf85c056d6533adee8d...8ee1abcd9d73b24a019d962933e8fdcce8997f5e — passed

The reported Vercel failure is an external deployment-authorization check, not a code failure. I found no blocking issue in the change.

Disclosure: Codex assisted with source tracing, test execution, and drafting this review; I independently verified the behavior and conclusion against the exact PR head.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.26%. Comparing base (ca57540) to head (8ee1abc).

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #526   +/-   ##
=======================================
  Coverage   99.26%   99.26%           
=======================================
  Files          17       17           
  Lines         543      545    +2     
  Branches      166      167    +1     
=======================================
+ Hits          539      541    +2     
  Misses          4        4           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.