fix: prevent page scroll when switching images with keyboard #493
Conversation
|
Someone is attempting to deploy a commit to the React Component Team on Vercel. A member of the Team first needs to authorize it. |
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. Walkthrough在 Preview 组件的键盘处理器中，将对 ESC、LEFT、RIGHT 键事件调用 Changes
Sequence Diagram(s)（不生成序列图 — 变更限于单组件内的键盘事件处理，交互参与方少于 3 个） Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 分钟 兔兔诗歌
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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 |
Summary of ChangesHello @cactuser-Lu, I'm Gemini Code Assist1! 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! This pull request addresses a user experience issue within the image preview component by preventing default browser actions when specific keyboard keys are pressed. Previously, using keys like 'Escape' or arrow keys for navigation could inadvertently trigger page scrolling. The changes ensure that these keyboard inputs are exclusively handled by the image preview, providing a smoother and more predictable interaction for users. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe 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
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 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
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request correctly fixes the issue of page scrolling when switching images using the keyboard by adding event.preventDefault(). The change is straightforward and effective. I've also added a suggestion to refactor the keyboard event handling logic using a switch statement, which could improve code readability and maintainability. Overall, great job on fixing this bug.
src/Preview/index.tsx
Outdated
| if (keyCode === KeyCode.ESC) { | ||
| event.preventDefault(); | ||
| onClose?.(); | ||
| } | ||
|
|
||
| if (showLeftOrRightSwitches) { | ||
| if (keyCode === KeyCode.LEFT) { | ||
| event.preventDefault(); | ||
| onActive(-1); | ||
| } else if (keyCode === KeyCode.RIGHT) { | ||
| event.preventDefault(); | ||
| onActive(1); | ||
| } | ||
| } |
There was a problem hiding this comment.
While the current implementation is correct, you could refactor this block to use a switch statement. This would make the code more structured, readable, and easier to maintain, especially if more keyboard shortcuts are added in the future. It also helps to reduce some code duplication by grouping the LEFT and RIGHT arrow key handling.
switch (keyCode) {
case KeyCode.ESC:
event.preventDefault();
onClose?.();
break;
case KeyCode.LEFT:
case KeyCode.RIGHT:
if (showLeftOrRightSwitches) {
event.preventDefault();
onActive(keyCode === KeyCode.LEFT ? -1 : 1);
}
break;
default:
break;
}
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #493 +/- ##
=======================================
Coverage 99.41% 99.41%
=======================================
Files 17 17
Lines 509 512 +3
Branches 152 152
=======================================
+ Hits 506 509 +3
Misses 3 3 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull request overview
This PR fixes an issue where using keyboard shortcuts (ESC, LEFT, RIGHT arrows) in the image preview component would trigger unwanted page scrolling. The fix adds event.preventDefault() calls to the keyboard event handler to prevent default browser behavior while maintaining the intended preview functionality.
Key Changes
- Added
event.preventDefault()for ESC key to prevent default behavior when closing preview - Added
event.preventDefault()for LEFT and RIGHT arrow keys to prevent page scrolling when switching between images
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/Preview/index.tsx
Outdated
| event.preventDefault(); | ||
| onClose?.(); | ||
| } | ||
|
|
||
| if (showLeftOrRightSwitches) { | ||
| if (keyCode === KeyCode.LEFT) { | ||
| event.preventDefault(); | ||
| onActive(-1); | ||
| } else if (keyCode === KeyCode.RIGHT) { | ||
| event.preventDefault(); | ||
| onActive(1); |
There was a problem hiding this comment.
The keyboard event handling behavior, including the preventDefault calls, lacks test coverage. Consider adding tests to verify that:
- ESC key closes the preview and prevents default browser behavior
- LEFT/RIGHT arrow keys switch between images when showLeftOrRightSwitches is true
- preventDefault is properly called to prevent page scrolling
This would help ensure the fix for issue #56290 is properly validated and prevent regressions.
2 participants
fix: ant-design/ant-design#56290
Summary by CodeRabbit
发布说明
✏️ Tip: You can customize this high-level summary in your review settings.