fix(tabs): fixed the tab content cannot be loaded.

[discreted66]

PR

fix:修复初始化tab内容无法加载问题

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our Commit Message Guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

• Yes
• No

Other information

Summary by CodeRabbit

• Bug Fixes
  • Improved tab state synchronization to correctly restore cached tab selections between sessions
  • Fixed automatic selection of the first tab when no default tab is specified
  • Enhanced tab initialization sequence to ensure proper state management during component mounting
  • Optimized tab interaction including swipe detection and scroll positioning for smoother navigation

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Enhanced tab component initialization logic by introducing a watcher to synchronize current item state when cached item changes, and refactored the mounted lifecycle to conditionally initialize the current item, auto-select the first tab when appropriate, and coordinate swipe observation with scroll positioning.

Changes

Cohort / File(s)	Summary
Tab State Synchronization & Initialization packages/renderless/src/tabs-mf/vue.ts	Added watcher on state.cacheCurrentItem for immediate state synchronization; enhanced onMounted with conditional item initialization, first-tab auto-selection, and swipe size observation within nextTick; replaced unconditional assignments with conditional logic

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Order of initialization: Verify that the new watcher, conditional logic, and auto-selection occur in the correct sequence and don't conflict
• Conditions for first-tab auto-selection: Confirm the logic correctly handles cases where no activeName, modelValue, or cached item exist
• Interaction between watcher and mounted: Ensure the watcher's immediate mode and mounted lifecycle don't cause redundant state updates or race conditions

Poem

🐰 Tabs now remember, oh what a sight,
Watchers and mounted in perfect flight,
First tab selected when nothing's in sight,
State stays in sync, everything's right! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix(tabs): fixed the tab content cannot be loaded' directly describes the main change - addressing a tab initialization issue where content fails to load, which aligns with the code modifications to the tabs component mount behavior.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• 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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/renderless/src/tabs-mf/vue.ts (1)

107-119: Effective initialization fix with minor optimization opportunity.

The enhanced onMounted logic properly addresses the initialization issue by:

• Observing tab swipe sizes
• Ensuring currentItem is set from cache
• Auto-selecting the first tab when no explicit selection exists (likely the core fix)
• Preserving scroll behavior for explicit selections

The logic is sound and should resolve the reported issue.

Optional: Consolidate redundant initialization

Lines 110-112 duplicate what the watcher at lines 95-103 already does. Consider removing this redundant check since the watcher with immediate: true handles the synchronization:

🔎 Proposed simplification

     nextTick(() => {
       api.observeTabSwipeSize()
-      // 确保 currentItem 已设置，如果还没有则使用 cacheCurrentItem
-      if (!state.currentItem && state.cacheCurrentItem) {
-        state.currentItem = state.cacheCurrentItem
-      }
       // 如果没有 activeName 或 modelValue，且没有选中的 item，则设置第一个 item 为选中
       if (!props.activeName && !props.modelValue && state.items.length > 0 && !state.cacheCurrentItem) {
         api.changeCurrentName(state.items[0].name)

Verify: Should auto-selected tabs scroll into view?

When the first tab is auto-selected (line 115), no scrollTo is called, unlike the explicit activeName/modelValue cases (lines 117-118). Confirm this is the intended UX behavior.

📜 Review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2889bcb and 1e6f673.

📒 Files selected for processing (1)

• packages/renderless/src/tabs-mf/vue.ts (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: PR E2E Test (pnpm test:e2e3)

🔇 Additional comments (1)

packages/renderless/src/tabs-mf/vue.ts (1)

94-103: Good reactive synchronization.

The watcher effectively keeps state.currentItem synchronized with state.cacheCurrentItem throughout the component lifecycle. The immediate: true flag ensures any initially-selected item is captured, and the guard condition prevents unnecessary updates.