Skip to content

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

Merged
zombieJ merged 6 commits into
react-component:masterfrom
jiangrong-devops:fix/table
Aug 3, 2026
Merged

fix(table): fix row hover with expanded offset rowSpan#1488
zombieJ merged 6 commits into
react-component:masterfrom
jiangrong-devops:fix/table

Conversation

@jiangrong-devops

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

Copy link
Copy Markdown
Contributor

🤔 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 修复

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

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

@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
Contributor

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

Walkthrough

该 PR 保存展开行偏移前的 rowSpan,并将其传递到 CellCell 使用该值计算悬停范围。onCell 返回的属性会先克隆。测试覆盖展开行、旧版 render 和 StrictMode 场景。

Changes

展开行悬停范围修复

Layer / File(s) Summary
Cell 属性合约和悬停计算
src/Cell/index.tsx
CellProps 增加私有可选属性 originRowSpanCellrowSpanoriginRowSpan、合并后的 rowSpan 顺序确定悬停范围。
BodyRow 计算和传递 originRowSpan
src/Body/BodyRow.tsx, src/VirtualTable/VirtualCell.tsx
getCellProps 克隆 onCell 属性,并在展开行偏移前保存 originRowSpanBodyRowVirtualCell 将该值传递给 Cell
展开行悬停范围测试
tests/Hover.spec.tsx
新增测试,验证展开行偏移、旧版 render 返回值,以及 StrictMode 下 onCell 属性对象保持不变。

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

Possibly related PRs

  • react-component/table#1503:同样修改展开行处理和虚拟表格逻辑,但该 PR 主要处理 rowSpan 传递与悬停范围。

Poem

兔子保存原始 rowSpan
展开时传给悬停判断。
单元格边界保持清楚,
onCell 属性不再被改写。
测试确认展开与收起。

🚥 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 行悬停问题,与变更内容和 PR 目标一致。
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
Contributor

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
jiangrong-devops and others added 2 commits August 1, 2026 11:57
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

@coderabbitai coderabbitai 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.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/VirtualTable/VirtualCell.tsx (1)

60-66: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

在虚拟表格的 getCellProps 中传入 expandedRowOffset

VirtualCell 现在读取并转发 originRowSpan,但调用缺少 expandedRowOffset,导致该虚拟行路径始终使用默认值 0originRowSpan 不会被计算。支持带偏移展开行的 rowSpan 时,需从虚拟行状态传入该值,并增加覆盖测试。

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

In `@src/VirtualTable/VirtualCell.tsx` around lines 60 - 66, Update VirtualCell’s
getCellProps call to pass expandedRowOffset from the virtual row state so
expanded-row rowSpan calculations use the actual offset instead of 0; add
coverage for a virtual row with an expansion offset and originRowSpan.
🤖 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.

Outside diff comments:
In `@src/VirtualTable/VirtualCell.tsx`:
- Around line 60-66: Update VirtualCell’s getCellProps call to pass
expandedRowOffset from the virtual row state so expanded-row rowSpan
calculations use the actual offset instead of 0; add coverage for a virtual row
with an expansion offset and originRowSpan.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 276e1c73-301f-41c2-bd72-2c8e89e0f5f5

📥 Commits

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

📒 Files selected for processing (3)
  • src/Body/BodyRow.tsx
  • src/Cell/index.tsx
  • src/VirtualTable/VirtualCell.tsx

@zombieJ
zombieJ merged commit 2ebb87b into react-component:master Aug 3, 2026
4 of 5 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