From 9c049690227af8aba61a1f7c002b00c5dfeb63ff Mon Sep 17 00:00:00 2001
From: Hash Brown <hi@xzd.me>
Date: Mon, 5 Aug 2024 17:09:27 +0800
Subject: [PATCH] fix(Tabs): use `nextTick` before marker calc (#2020)

---
 src/runtime/components/navigation/Tabs.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/navigation/Tabs.vue b/src/runtime/components/navigation/Tabs.vue
index f87c70d1..11a5ab36 100644
--- a/src/runtime/components/navigation/Tabs.vue
+++ b/src/runtime/components/navigation/Tabs.vue
@@ -53,7 +53,7 @@
 </template>
 
 <script lang="ts">
-import { toRef, ref, watch, onMounted, defineComponent } from 'vue'
+import { toRef, ref, watch, onMounted, defineComponent, nextTick } from 'vue'
 import type { PropType } from 'vue'
 import { TabGroup as HTabGroup, TabList as HTabList, Tab as HTab, TabPanels as HTabPanels, TabPanel as HTabPanel, provideUseId } from '@headlessui/vue'
 import { useResizeObserver } from '@vueuse/core'
@@ -164,7 +164,10 @@ export default defineComponent({
       calcMarkerSize(selectedIndex.value)
     })
 
-    onMounted(() => calcMarkerSize(selectedIndex.value))
+    onMounted(async () => {
+      await nextTick()
+      calcMarkerSize(selectedIndex.value)
+    })
 
     provideUseId(() => useId())