Skip to content

Conversation

@tuzixiangs
Copy link
Contributor

@tuzixiangs tuzixiangs commented Nov 22, 2025

此 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.

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.
@vercel
Copy link

vercel bot commented Nov 22, 2025

@tuzixiangs is attempting to deploy a commit to the React Component Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai
Copy link

coderabbitai bot commented Nov 22, 2025

Note

Other AI code review bot(s) detected

CodeRabbit 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

将组件中直接调用 element.scrollIntoView() 的行为替换为集中式工具函数 scrollIntoParentView(element),并相应更新测试以使用 commonUtil 命名空间。公共接口签名无变化。

Changes

Cohort / File(s) 变更摘要
滚动调用重定向
src/OptionList/Column.tsx
将 effect 中对活跃元素的 activeElement.scrollIntoView() 直接调用替换为 scrollIntoParentView(activeElement);同时更新 import 引入 scrollIntoParentView
工具格式化
src/utils/commonUtil.ts
scrollIntoParentView 的条件判断做了格式化(换行),未更改逻辑。
测试适配
tests/index.spec.tsx
将对工具函数的导入改为 import * as commonUtil,并把对 scrollIntoView 的断言/spy 替换为对 commonUtil.scrollIntoParentView 的断言/spy;调整某些断言(如 hover 时 scrollTo 调用次数)。

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
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

  • 重点检查 Column.tsx 的调用点是否保持与原行为一致(滚动边界、对齐方式)。
  • 审阅 commonUtil.scrollIntoParentView 的实现细节(滚动容器查找、对齐/平滑参数)。
  • 检查 tests/index.spec.tsx 中 spy/断言是否正确覆盖新路径及副作用。

Possibly related PRs

🐰 我是一只小兔忙,
换上工具把滚动藏,
活跃项轻轻往前望,
统一调用步子稳,
代码整洁心欢畅 🥕

Pre-merge checks and finishing touches

❌ 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%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 标题清晰准确地反映了变更的主要目的——使用scrollIntoParentView来防止页面滚动,这是PR的核心改动。
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6b063ff and c58a090.

📒 Files selected for processing (2)
  • src/utils/commonUtil.ts (1 hunks)
  • tests/index.spec.tsx (4 hunks)
✅ Files skipped from review due to trivial changes (1)
  • src/utils/commonUtil.ts
🔇 Additional comments (4)
tests/index.spec.tsx (4)

7-7: 以命名空间方式导入 commonUtil 的调整是合理的

这里统一通过 import * as commonUtil 使用工具方法,既满足后文对 toRawValues 的调用,也支持对 scrollIntoParentViewjest.spyOn,避免直接 mock 默认 /具名导出时的 Jest 限制,改动清晰且易维护。


1073-1081: hover + search 用例仅断言一次 scrollTo 调用符合预期

在该场景下只在最后一次悬浮触发滚动,因此改为 toHaveBeenCalledTimes(1) 更贴近业务语义,也能防止未来无意增加多余滚动调用导致行为回归,断言粒度合适。


1097-1102: 键盘导航用例改为监听 commonUtil.scrollIntoParentView 与实现对齐

通过 jest.spyOn(commonUtil, 'scrollIntoParentView') 并断言以当前激活菜单项为参数被调用,直接绑定到新的滚动工具函数,而不再依赖 DOM 原生 scrollIntoView,很好地覆盖了此次修复的关键路径;测试结束后立即 spy.mockRestore() 也避免了对后续用例的串扰。


1145-1147: toRawValues 使用命名空间调用保持行为不变

将原先直接导入改为 commonUtil.toRawValues(),在不改变「未传入参数返回空数组」语义的前提下,与上方对 commonUtil 的统一引入方式保持一致,利于后续集中维护工具方法。


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 and usage tips.

@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello @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 旨在提升 Cascader 组件的用户体验,通过解决一个在特定条件下(设置 defaultValue)会导致页面意外滚动的问题。核心在于优化了组件内部的滚动逻辑,确保下拉菜单的滚动操作仅限于其自身容器,从而避免了对整个页面布局和用户视角的干扰。

Highlights

  • 修复页面滚动问题: 解决了当 Cascader 组件设置 defaultValue 时,首次打开下拉菜单会导致整个页面滚动到顶部的问题。
  • 替换滚动方法: 将 Column.tsx 中原生的 scrollIntoView 方法替换为 rc-cascader 内部的 scrollIntoParentView 工具函数。
  • 限制滚动范围: 新的 scrollIntoParentView 函数通过手动计算偏移量并设置父容器的 scrollTop,确保滚动行为严格限制在下拉菜单容器内部,避免影响外部页面。
Using Gemini Code Assist

The 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 /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.

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

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a 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 文件中的评论。

@afc163
Copy link
Member

afc163 commented Nov 24, 2025

ci failed

@codecov
Copy link

codecov bot commented Nov 24, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.52%. Comparing base (02a9a28) to head (c58a090).
⚠️ Report is 3 commits behind head on master.

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.
📢 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.

@tuzixiangs
Copy link
Contributor Author

ci failed

已重新修改了测试用例

@afc163 afc163 merged commit 08b13f8 into react-component:master Nov 25, 2025
9 of 10 checks passed
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.

2 participants