fix: Dynamic height bump the scroll pos in some edge case

[zombieJ]

fix ant-design/ant-design#53334
close react-component/table#1256

When the Item has already record the height (for height change), the auto scroll patch offset should skip to avoid jump.

Summary by CodeRabbit

• Bug Fixes

  • 修复了列表滚动位置在高度变化时的同步逻辑，避免在有缓存高度时发生不必要的滚动调整。

• Tests

  • 优化了测试用例中对元素高度的模拟方式，支持动态设置高度。
  • 新增用例，确保单个列表项高度变化时不会错误触发滚动事件。

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
virtual-list	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 6, 2025 7:41am

[coderabbitai]

Walkthrough

本次更改修正了虚拟列表在行高变更时的滚动同步逻辑。主要调整包括：在缓存高度变更记录时，改用 Map 存储变更前的值，并在滚动同步时准确获取变更项及其旧值，避免在有旧高度缓存时错误地调整滚动条。同时，测试用例也进行了相应增强。

Changes

文件/分组	变更摘要
src/List.tsx	优化 useLayoutEffect 钩子中滚动同步逻辑，正确获取变更项 key 及其旧值，仅在无旧缓存时调整滚动。
src/utils/CacheMap.ts	diffKeys 由 Set 改为 Map，记录 key 及其旧值，set、resetRecord、getRecord 方法相应调整。
tests/scroll.test.js	增强 offsetHeight/clientHeight mock，新增“not scroll jump for item height change”测试用例，验证高度变更不触发滚动。

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant List
    participant CacheMap

    User->>List: 展开/收起首行详情
    List->>CacheMap: 记录高度变更及旧值
    List->>List: useLayoutEffect 检查变更记录
    alt 有变更项且无旧缓存
        List->>List: 计算高度差并调整 scrollTop
    else 有旧缓存
        List->>List: 不调整 scrollTop
    end

Loading

Assessment against linked issues

Objective	Addressed	Explanation
修复虚拟表格展开/收起顶部行详情时，表格不应自动滚动（#53334）	✅

Possibly related PRs

• fix: add mergedData length check #306: 同样优化了 src/List.tsx 中 useLayoutEffect 钩子的滚动调整逻辑，防止错误的滚动行为。
• enhance: Scroll top should not shaking #296: 也对 src/List.tsx 中的滚动同步逻辑进行了修正，与本 PR 直接相关。

Poem

🐇
虚表行高变，滚动莫慌乱，
旧值记心间，滚条稳如山。
代码轻轻改，体验更自然，
小兔欢快跳，列表更美满！

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

tests/scroll.test.js

Oops! Something went wrong! :(

ESLint: 8.57.1

Error: Cannot read config file: /.eslintrc.js
Error: Cannot find module '@umijs/fabric/dist/eslint'
Require stack:

• /.eslintrc.js
• /node_modules/.pnpm/@eslint[email protected]/node_modules/@eslint/eslintrc/dist/eslintrc.cjs
• /node_modules/.pnpm/[email protected]/node_modules/eslint/lib/cli-engine/cli-engine.js
• /node_modules/.pnpm/[email protected]/node_modules/eslint/lib/eslint/eslint.js
• /node_modules/.pnpm/[email protected]/node_modules/eslint/lib/eslint/index.js
• /node_modules/.pnpm/[email protected]/node_modules/eslint/lib/cli.js
• /node_modules/.pnpm/[email protected]/node_modules/eslint/bin/eslint.js
  at Module._resolveFilename (node:internal/modules/cjs/loader:1248:15)
  at Module._load (node:internal/modules/cjs/loader:1074:27)
  at TracingChannel.traceSync (node:diagnostics_channel:315:14)
  at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
  at Module.require (node:internal/modules/cjs/loader:1339:12)
  at require (node:internal/modules/helpers:135:16)
  at Object. (/.eslintrc.js:1:14)
  at Module._compile (node:internal/modules/cjs/loader:1546:14)
  at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
  at Module.load (node:internal/modules/cjs/loader:1317:32)

src/utils/CacheMap.ts

Oops! Something went wrong! :(

ESLint: 8.57.1

Error: Cannot read config file: /.eslintrc.js
Error: Cannot find module '@umijs/fabric/dist/eslint'
Require stack:

• /.eslintrc.js
• /node_modules/.pnpm/@eslint[email protected]/node_modules/@eslint/eslintrc/dist/eslintrc.cjs
• /node_modules/.pnpm/[email protected]/node_modules/eslint/lib/cli-engine/cli-engine.js
• /node_modules/.pnpm/[email protected]/node_modules/eslint/lib/eslint/eslint.js
• /node_modules/.pnpm/[email protected]/node_modules/eslint/lib/eslint/index.js
• /node_modules/.pnpm/[email protected]/node_modules/eslint/lib/cli.js
• /node_modules/.pnpm/[email protected]/node_modules/eslint/bin/eslint.js
  at Module._resolveFilename (node:internal/modules/cjs/loader:1248:15)
  at Module._load (node:internal/modules/cjs/loader:1074:27)
  at TracingChannel.traceSync (node:diagnostics_channel:315:14)
  at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
  at Module.require (node:internal/modules/cjs/loader:1339:12)
  at require (node:internal/modules/helpers:135:16)
  at Object. (/.eslintrc.js:1:14)
  at Module._compile (node:internal/modules/cjs/loader:1546:14)
  at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
  at Module.load (node:internal/modules/cjs/loader:1317:32)

src/List.tsx

Oops! Something went wrong! :(

ESLint: 8.57.1

Error: Cannot read config file: /.eslintrc.js
Error: Cannot find module '@umijs/fabric/dist/eslint'
Require stack:

• /.eslintrc.js
• /node_modules/.pnpm/@eslint[email protected]/node_modules/@eslint/eslintrc/dist/eslintrc.cjs
• /node_modules/.pnpm/[email protected]/node_modules/eslint/lib/cli-engine/cli-engine.js
• /node_modules/.pnpm/[email protected]/node_modules/eslint/lib/eslint/eslint.js
• /node_modules/.pnpm/[email protected]/node_modules/eslint/lib/eslint/index.js
• /node_modules/.pnpm/[email protected]/node_modules/eslint/lib/cli.js
• /node_modules/.pnpm/[email protected]/node_modules/eslint/bin/eslint.js
  at Module._resolveFilename (node:internal/modules/cjs/loader:1248:15)
  at Module._load (node:internal/modules/cjs/loader:1074:27)
  at TracingChannel.traceSync (node:diagnostics_channel:315:14)
  at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
  at Module.require (node:internal/modules/cjs/loader:1339:12)
  at require (node:internal/modules/helpers:135:16)
  at Object. (/.eslintrc.js:1:14)
  at Module._compile (node:internal/modules/cjs/loader:1546:14)
  at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
  at Module.load (node:internal/modules/cjs/loader:1317:32)

---

📜 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 65777c0 and 820d350.

📒 Files selected for processing (3)

• src/List.tsx (1 hunks)
• src/utils/CacheMap.ts (2 hunks)
• tests/scroll.test.js (2 hunks)

🔇 Additional comments (8)

src/utils/CacheMap.ts (4)

11-11: 改用 Map 存储旧值，提升数据跟踪能力

通过将 diffKeys Set 改为 diffRecords Map，增强了数据变更的跟踪能力，这样不仅能知道哪些键发生了变化，还能知道它们变化前的值。这对于滚动同步逻辑的优化至关重要。

---

18-20: 正确记录旧值以支持滚动位置优化

在设置新值之前，先记录键对应的旧值，这种方式可以让滚动调整逻辑获取足够的信息来判断是否需要调整滚动位置。

---

34-34: 更新重置记录方法

与更改数据结构类型相匹配，适当更新了重置方法。

---

38-38: 返回包含旧值的变更记录

返回包含键和旧值的 Map 结构，为滚动位置调整提供更多信息，这是修复滚动跳动问题的关键基础。

src/List.tsx (1)

281-286: 优化滚动位置同步逻辑

修复了动态高度变更导致的滚动跳动问题：

1. 正确从 Map 结构中获取键和旧高度值
2. 仅在旧高度未定义(undefined)时才调整滚动位置，避免不必要的滚动调整

这处修改直接解决了 PR 描述中提到的问题，对于已经记录过高度的元素，自动滚动补偿将被跳过。

tests/scroll.test.js (3)

41-44: 增强模拟高度获取函数

通过读取 data-height 属性动态返回高度值，为测试动态高度变化场景提供支持。这种实现方式更灵活，适用于多种测试场景。

---

47-50: 同步更新 clientHeight 模拟实现

确保 clientHeight 与 offsetHeight 的模拟实现保持一致，提高测试的准确性。

---

676-733: 新增测试用例验证高度变更不引起滚动跳动

这个新测试用例非常关键，它直接验证了修复的核心问题：当列表项高度发生变化时，不应该触发不必要的滚动事件。测试步骤清晰：

1. 渲染虚拟列表
2. 通过设置 data-height 属性模拟第一个列表项高度变化
3. 触发 resize 事件让组件感知高度变化
4. 验证 onScroll 回调没有被调用，证明没有发生不必要的滚动

这个测试完全符合 PR 的修复目标，确保了在动态高度变更场景下滚动位置的稳定性。

✨ Finishing Touches

• 📝 Generate Docstrings

---

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 97.64%. Comparing base (65777c0) to head (820d350).

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #309      +/-   ##
==========================================
+ Coverage   97.27%   97.64%   +0.37%     
==========================================
  Files          19       19              
  Lines         807      808       +1     
  Branches      191      195       +4     
==========================================
+ Hits          785      789       +4     
+ Misses         22       19       -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.