Skip to content

fix(table): fix row hover with expanded offset rowSpan - #1488

Open
jiangrong-devops wants to merge 5 commits into
react-component:masterfrom
jiangrong-devops:fix/table
Open

fix(table): fix row hover with expanded offset rowSpan#1488
jiangrong-devops wants to merge 5 commits into
react-component:masterfrom
jiangrong-devops:fix/table

Conversation

@jiangrong-devops

@jiangrong-devops jiangrong-devops commented May 13, 2026

Copy link
Copy Markdown

🤔 This is a ...

  • 🆕 New feature
  • 🐞 Bug fix
  • 📝 Site / documentation improvement
  • 📽️ Demo improvement
  • 💄 Component style improvement
  • 🤖 TypeScript definition improvement
  • 📦 Bundle size optimization
  • ⚡️ Performance optimization
  • ⭐️ Feature enhancement
  • 🌐 Internationalization
  • 🛠 Refactoring
  • 🎨 Code style optimization
  • ✅ Test Case
  • 🔀 Branch merge
  • ⏩ Workflow
  • ⌨️ Accessibility improvement
  • ❓ Other (about what?)

🔗 Related Issues

N/A

💡 Background and Solution

Background
Chinese

  • 在将表格全部展开时出现鼠标移入存在同级展开的元素行后 hover 会扩散到其他非当前视觉焦点链条上,导致 hover 得不到预期效果,仅在 expand-sticky 中发现该行为,其余示例 hover 表现符合预期

English

  • When all table rows are expanded, hovering over a row containing elements at the same expansion level causes the hover effect to propagate to other elements that are not currently in the visual focus chain, resulting in the hover effect not behaving as expected. This behavior was observed only in the expand-sticky case; in all other examples, the hover behavior was as expected.

Playground

image image

📝 Change Log

Language Changelog
🇺🇸 English fix row hover with expanded offset rowSpan
🇨🇳 Chinese 修复展开行时 rowSpan 偏移导致的悬停问题

Summary by CodeRabbit

  • Bug Fixes

    • 修复展开行场景下单元格悬停范围计算不准确的问题。
    • 确保合并单元格、展开行及虚拟表格中的悬停高亮状态保持正确。
    • 防止展开或收起行时单元格属性被意外修改。
  • Tests

    • 增加展开行、合并单元格及虚拟表格悬停行为的覆盖测试。

@vercel

vercel Bot commented May 13, 2026

Copy link
Copy Markdown

@jiangrong-devops is attempting to deploy a commit to the React Component Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented May 13, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 4fc93128-1bd2-42d0-99d5-8c17afb024ad

📥 Commits

Reviewing files that changed from the base of the PR and between 8f5aa68 and 03329fc.

📒 Files selected for processing (1)
  • tests/Hover.spec.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • tests/Hover.spec.tsx

Walkthrough

该 PR 增加 hoverRowSpan,将悬停范围与渲染用的 rowSpan 分离。BodyRowVirtualCell 传递该值,Cell 使用它计算悬停状态。测试覆盖展开行偏移、旧版 render 和 StrictMode 场景。

Changes

展开行悬停范围修复

Layer / File(s) Summary
Cell 属性合约和悬停计算
src/Cell/index.tsx
CellProps 增加可选的 hoverRowSpanCell 按优先级计算悬停范围,并用于初始化悬停状态和 onMouseEnter
BodyRow 计算和传递 hoverRowSpan
src/Body/BodyRow.tsx, src/VirtualTable/VirtualCell.tsx
getCellProps 克隆 onCell 属性,并在展开行偏移时保存独立的 hoverRowSpanBodyRowVirtualCell 将该值传递给 Cell
展开行悬停范围测试
tests/Hover.spec.tsx
新增测试,验证展开行偏移、旧版 render 返回值,以及 StrictMode 下 onCell 属性对象的稳定性。

Estimated code review effort: 3 (Moderate) | ~20 minutes

Poem

兔子保存 rowSpan
另存一份 hoverRowSpan
展开行改变渲染范围,
悬停仍按原范围计算。
测试确认每格边界。

🚥 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 标题准确概括了本次针对展开行偏移 rowSpan 导致行悬停异常的修复。
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ 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

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

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a fix to ensure that row hover states remain accurate when expanded row offsets are used in the table. It adds a 'hoverRowSpan' property to handle row span calculations independently from the layout row span, which is modified by expanded rows. The changes are implemented across 'BodyRow', 'Cell', and 'VirtualCell' components, and verified with a new test case in 'Hover.spec.tsx'. I have no feedback to provide as there were no review comments.

@codecov

codecov Bot commented Jul 31, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.05%. Comparing base (adf0701) to head (2033108).
⚠️ Report is 2 commits behind head on master.

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #1488   +/-   ##
=======================================
  Coverage   99.05%   99.05%           
=======================================
  Files          45       45           
  Lines        1372     1374    +2     
  Branches      411      412    +1     
=======================================
+ Hits         1359     1361    +2     
  Misses         13       13           

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

jiangrong-devops and others added 2 commits July 31, 2026 20:21
Respect legacy render rowSpan when calculating hover ranges and avoid mutating objects returned by onCell. Add regression coverage for legacy cells, stable props, StrictMode, and expanded row rerenders.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

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

Inline comments:
In `@tests/Hover.spec.tsx`:
- Around line 190-238: Update the test case “keeps legacy render rowSpan
priority for hover range” to render an expanded row before asserting hover
behavior, using the existing expandable configuration and a supported expansion
mechanism such as expandedRowKeys or defaultExpandAllRows. Keep the legacy
rowSpan assertions and expandedRowOffset setup intact so the test covers hover
ranges after the physical expanded row is inserted.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 3d0c9609-8631-4244-9fa8-5d3c6ff82688

📥 Commits

Reviewing files that changed from the base of the PR and between 2033108 and 8f5aa68.

📒 Files selected for processing (3)
  • src/Body/BodyRow.tsx
  • src/Cell/index.tsx
  • tests/Hover.spec.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
  • src/Body/BodyRow.tsx
  • src/Cell/index.tsx

Comment thread tests/Hover.spec.tsx
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
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.

1 participant