-
-
Notifications
You must be signed in to change notification settings - Fork 145
fix: use scrollIntoParentView to prevent page scroll #633
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: use scrollIntoParentView to prevent page scroll #633
Conversation
When Cascader has a defaultValue, opening it for the first time causes the page to scroll to the top due to native scrollIntoView behavior. This change replaces it with scrollIntoParentView to ensure scrolling is confined to the dropdown container.
|
@tuzixiangs 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将组件中直接调用 Changes
Sequence Diagram(s)sequenceDiagram
participant Component as Column.tsx
participant Util as commonUtil.scrollIntoParentView
participant DOM as DOM Element
Component->>DOM: 识别 activeElement
alt 使用旧实现
Component->>DOM: activeElement.scrollIntoView()
else 使用新实现
Component->>Util: scrollIntoParentView(activeElement)
Util->>DOM: 计算并触发父容器滚动
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
诗
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (1)
🔇 Additional comments (4)
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 @tuzixiangs, 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! 此 PR 旨在提升 Highlights
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
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code Review
这个 PR 通过将 scrollIntoView 替换为自定义的 scrollIntoParentView 函数,很好地解决了 Cascader 组件在设置 defaultValue 时首次打开下拉菜单导致的页面滚动问题。这个改动方向是正确的,可以有效防止不必要的页面级滚动。
我有一个关于 scrollIntoParentView 函数实现的建议。当前实现使用了 offsetHeight,在某些情况下(例如,当菜单容器有边框时)可能导致滚动计算不精确。我建议改用 clientHeight 来提高健壮性,确保滚动目标元素能完全出现在可见区域内。具体细节请见我在 src/OptionList/Column.tsx 文件中的评论。
|
ci failed |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #633 +/- ##
=======================================
Coverage 99.52% 99.52%
=======================================
Files 24 24
Lines 635 635
Branches 194 194
=======================================
Hits 632 632
Misses 3 3 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
已重新修改了测试用例 |
此 PR 修复了当
Cascader设置defaultValue时,首次打开下拉菜单会导致页面滚动到顶部的问题。问题原因是
Column.tsx中使用了原生的scrollIntoView方法。即使配置了block: 'nearest',在某些情况下仍会触发页面级别的滚动或布局偏移。本次修改使用
rc-cascader内部的scrollIntoParentView工具函数替换了原生调用。该函数通过手动计算偏移量并设置父容器的 scrollTop,确保滚动行为严格限制在下拉菜单容器内部,不会影响外部页面。Summary by CodeRabbit
发行说明
✏️ Tip: You can customize this high-level summary in your review settings.