fix(tabs): 修复tabs异步设置titles滚动失效（#2351） #2369
Conversation
Walkthrough
Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Tabs
participant scrollIntoView
User->>Tabs: Select a tab
Tabs->>scrollIntoView: Call with index, immediate?
scrollIntoView-->>Tabs: Calculate correct index
Tabs-->>User: Tab smoothly scrolls into view
Poem
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (1)
Additional context usedBiome
Additional comments not posted (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
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 as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## next #2369 +/- ##
=======================================
Coverage 85.99% 85.99%
=======================================
Files 217 217
Lines 22821 22823 +2
Branches 2539 2539
=======================================
+ Hits 19624 19626 +2
Misses 3192 3192
Partials 5 5 ☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (3)
src/packages/tabs/tabs.tsx (3)
Line range hint
192-192: 建议使用可选链来提高代码的安全性和可读性。- if (String(value) !== String(child.props.value || idx) && autoHeight) + if (String(value) !== String(child.props.value || idx)?.autoHeight)
Line range hint
205-217: 为了提高无障碍访问性，请确保使用鼠标事件的同时，添加相应的键盘事件处理。+ onKeyUp={handleKeyUp}
Line range hint
1-250: 整体来看，组件结构合理，功能实现符合预期。建议增加更多的代码注释，以提高代码的可读性和可维护性。
🤔 这个变动的性质是？
🔗 相关 Issue
#2351
💡 需求背景和解决方案
问题背景：
在已有代码中，对于每个tabs里的titles，遍历渲染的时候会把item组件的 ref push到 titleItemsRef.current 中，这个current一直随着点击切换 tab 或 tab 的 titles 变化而累加，最终这个 current 会有很大的存储。
并且移动tab到视区中心的代码只从 index 获取此元素。所以在 tab 的titles先是较少（假设只有3个），后续变多（假设为8）时，假设要移动到第5个时，titleItemsRef.current 的第5个索引并没有这个元素，因此会滚动失效。
修复方案：
取 titleItemsRef.current 的最后/最新的内容，并获取最新的 titles 元素，从而使滚动正常。
☑️ 请求合并前的自查清单
Summary by CodeRabbit
Tabs组件中scrollIntoView函数的逻辑，以正确计算需要滚动到视野内的标题项索引。