fix: dropdown menu missing first tab in overflow edge case #866

eamonxg · 2025-07-22T09:12:50Z

🐛 问题描述

当所有标签页都滚动出可见区域时，useVisibleRange 返回 [0, 0] 导致第一个标签页被错误地排除在隐藏标签页列表之外，使得 dropdown 菜单不完整。

close ant-design/ant-design#54383
close #862

🔧 解决方案

将边界情况的返回值从 [0, 0] 修改为 [0, -1]，确保：

startHiddenTabs = tabs.slice(0, 0) = []
endHiddenTabs = tabs.slice(-1+1) = [所有标签页]
所有标签页都正确出现在 dropdown 菜单中

Summary by CodeRabbit

Bug Fixes
- 修正了当计算出的可见范围起始索引严格大于结束索引时的返回值，更明确地以 -1 表示无效范围。
Tests
- 新增了极端溢出场景下标签页显示行为的测试，确保所有标签正确转移至下拉菜单。

vercel · 2025-07-22T09:12:54Z

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

Name	Status	Preview	Comments	Updated (UTC)
tabs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 23, 2025 3:34am

coderabbitai · 2025-07-22T09:12:57Z

Walkthrough

本次变更调整了 useVisibleRange 钩子函数，当计算得到的 startIndex 大于 endIndex 时，其返回值由 [0, 0] 改为 [0, -1]，以更明确地表示空或无效的范围。新增了一个测试用例验证在容器尺寸过小时，所有标签页均被放入下拉菜单的极端溢出场景。其余逻辑未发生变化。

Changes

文件/文件组	变更摘要
src/hooks/useVisibleRange.ts	修改空或无效范围时的返回值，从 `[0, 0]` 改为 `[0, -1]`，调整条件判断格式
tests/overflow.test.tsx	新增测试用例，验证容器尺寸过小时所有标签页进入下拉菜单的行为

Estimated code review effort

2 (~15 分钟)

Possibly related PRs

fix: Tabs flicker in zoom mode #747：同样修改了 useVisibleRange.ts 中的条件判断逻辑，但侧重点不同，一个是使用 Math.floor()，本次变更调整了返回值及条件判断的比较符号。

Poem

兔子跳跃在代码间，
空区间如今更明显。
-1 结尾巧标记，
逻辑清晰不再疑。
代码如林，思路如风，
审查轻松，耳目一新！ 🐇✨

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.

src/hooks/useVisibleRange.ts

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the plugin "eslint-plugin-react".

(The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

npm install eslint-plugin-react@latest --save-dev

The plugin "eslint-plugin-react" was referenced from the config file in ".eslintrc.js » /node_modules/.pnpm/@umijs [email protected]_jest@30.0.5_@types [email protected][email protected]/node_modules/@umijs/fabric/dist/eslint.js".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

tests/overflow.test.tsx

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the plugin "eslint-plugin-react".

(The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

npm install eslint-plugin-react@latest --save-dev

The plugin "eslint-plugin-react" was referenced from the config file in ".eslintrc.js » /node_modules/.pnpm/@umijs [email protected]_jest@30.0.5_@types [email protected][email protected]/node_modules/@umijs/fabric/dist/eslint.js".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

📜 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 2869a67 and dc34238.

📒 Files selected for processing (2)

src/hooks/useVisibleRange.ts (2 hunks)
tests/overflow.test.tsx (1 hunks)

🧬 Code Graph Analysis (1)

tests/overflow.test.tsx (1)

tests/common/util.tsx (3)

getTabs (113-147)

triggerResize (149-156)

getTransformX (91-100)

🚧 Files skipped from review as they are similar to previous changes (1)

src/hooks/useVisibleRange.ts

🧰 Additional context used

🧬 Code Graph Analysis (1)

tests/overflow.test.tsx (1)

tests/common/util.tsx (3)

getTabs (113-147)

triggerResize (149-156)

getTransformX (91-100)

🔇 Additional comments (4)

tests/overflow.test.tsx (4)

588-647: 新增测试用例很好地覆盖了极端溢出场景

这个测试用例很好地验证了当容器过小无法显示任何标签页时的边界情况，与PR目标中提到的 useVisibleRange 钩子返回值从 [0, 0] 改为 [0, -1] 的修复完全对应。

测试逻辑清晰且全面：

通过设置极小容器空间模拟负可用空间场景

验证操作区域组件（更多按钮、添加按钮、额外内容）正确显示

检查变换值确保所有标签页被移出可视区域

动态计算标签页数量并验证下拉菜单包含所有标签页

特别赞赏动态计算标签页数量而非硬编码，这使测试更加健壮。

591-597: 注释清晰地解释了测试设置的数学逻辑

中文注释很好地解释了如何通过设置各组件尺寸来创建负可用空间（-10px），这有助于理解测试的意图和预期行为。

630-633: 动态计算标签页数量的方法很好

使用 container.querySelectorAll('.rc-tabs-nav-list .rc-tabs-tab') 动态获取标签页数量而不是硬编码，这是一个很好的实践，使测试更加灵活和可维护。

628-628: 确认 –10 为正确的期望值
经过检查，getTransformX 函数从 .rc-tabs-nav-list 的 style.transform 中提取数值并返回 Number 类型；在相同场景下的其他用例中也有多种具体断言（如 -23、0、-40 等），-10 也是基于真实渲染测量得出的正确值，无需修改。

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment

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

🪧 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.
- Explain this complex logic.
- 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 explain this code block.
- @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 explain its main purpose.
- @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 generate unit tests to generate unit tests for 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.

eamonxg · 2025-07-22T09:25:38Z

close #862

afc163 · 2025-07-22T10:27:56Z

能加个测试用例么？

eamonxg · 2025-07-23T03:39:08Z

能加个测试用例么？

补充了startIndex>endIndex即任何tab不能完整显示时的测试用例

codecov · 2025-07-23T05:42:04Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 98.97%. Comparing base (778663d) to head (dc34238).
Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #866   +/-   ##
=======================================
  Coverage   98.97%   98.97%           
=======================================
  Files          18       18           
  Lines         781      781           
  Branches      235      235           
=======================================
  Hits          773      773           
  Misses          8        8

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

fix(useVisibleRange): fix hidden tabs calculation in edge case

2869a67

eamonxg changed the title ~~fix: dropdown menu missing first tab in overflow edge case #862~~ fix: dropdown menu missing first tab in overflow edge case Jul 22, 2025

vercel bot deployed to Preview July 22, 2025 09:15 View deployment

test: add test cases to verify behavior when no visible tbs are present

dc34238

vercel bot deployed to Preview July 23, 2025 03:34 View deployment

afc163 merged commit ba47b30 into react-component:master Jul 23, 2025
8 checks passed

afc163 pushed a commit that referenced this pull request Jul 23, 2025

fix: dropdown menu missing first tab in overflow edge case (#866)

0be588c

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix: dropdown menu missing first tab in overflow edge case #866

fix: dropdown menu missing first tab in overflow edge case #866

Uh oh!

eamonxg commented Jul 22, 2025 •

edited by afc163

Loading

Uh oh!

vercel bot commented Jul 22, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Jul 22, 2025 •

edited

Loading

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

eamonxg commented Jul 22, 2025 •

edited by afc163

Loading

Uh oh!

afc163 commented Jul 22, 2025

Uh oh!

eamonxg commented Jul 23, 2025 •

edited

Loading

Uh oh!

codecov bot commented Jul 23, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

fix: dropdown menu missing first tab in overflow edge case #866

fix: dropdown menu missing first tab in overflow edge case #866

Uh oh!

Conversation

eamonxg commented Jul 22, 2025 • edited by afc163 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🐛 问题描述

🔧 解决方案

Summary by CodeRabbit

Summary by CodeRabbit

Uh oh!

vercel bot commented Jul 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Jul 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

eamonxg commented Jul 22, 2025 • edited by afc163 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

afc163 commented Jul 22, 2025

Uh oh!

eamonxg commented Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

eamonxg commented Jul 22, 2025 •

edited by afc163

Loading

vercel bot commented Jul 22, 2025 •

edited

Loading

coderabbitai bot commented Jul 22, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

eamonxg commented Jul 22, 2025 •

edited by afc163

Loading

eamonxg commented Jul 23, 2025 •

edited

Loading

codecov bot commented Jul 23, 2025 •

edited

Loading