Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 23, 2025

Conversation

eamonxg
Copy link
Contributor

@eamonxg eamonxg commented Jul 22, 2025

🐛 问题描述

当所有标签页都滚动出可见区域时,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

Summary by CodeRabbit

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

Copy link

vercel bot commented Jul 22, 2025

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

Copy link

coderabbitai bot commented Jul 22, 2025

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] 的修复完全对应。

测试逻辑清晰且全面:

  1. 通过设置极小容器空间模拟负可用空间场景
  2. 验证操作区域组件(更多按钮、添加按钮、额外内容)正确显示
  3. 检查变换值确保所有标签页被移出可视区域
  4. 动态计算标签页数量并验证下拉菜单包含所有标签页

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


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

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


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

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


628-628: 确认 –10 为正确的期望值
经过检查,getTransformX 函数从 .rc-tabs-nav-liststyle.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 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
@eamonxg
Copy link
Contributor Author

eamonxg commented Jul 22, 2025

close #862

@afc163
Copy link
Member

afc163 commented Jul 22, 2025

能加个测试用例么?

@eamonxg
Copy link
Contributor Author

eamonxg commented Jul 23, 2025

能加个测试用例么?

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

Copy link

codecov bot commented Jul 23, 2025

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.

@afc163 afc163 merged commit ba47b30 into react-component:master Jul 23, 2025
8 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
2 participants