fix(components): DOM update finished calculating navOffset (#8221)

closed #7672

packages/components/tabs/__tests__/tabs.test.ts

@@ -678,4 +678,54 @@ describe('Tabs.vue', () => {
   test('resize', async () => {
     // TODO: jsdom not support `clientWidth`.
   })
+
+  test('DOM update finished calculating navOffset', async () => {
+    const tabs: string[] = []
+    for (let i = 0; i < 5000; i++) {
+      tabs.push(i.toString())
+    }
+    const wrapper = mount({
+      components: {
+        'el-tabs': Tabs,
+        'el-tab-pane': TabPane,
+      },
+      template: `
+        <el-tabs v-model="activeName">
+          <el-tab-pane
+            v-for="item in tabs"
+            :key="item"
+            :label="item"
+            :name="item"
+          />
+        </el-tabs>
+      `,
+      data() {
+        return {
+          activeName: '0',
+          tabs,
+        }
+      },
+    })
+
+    const tabsWrapper = wrapper.findComponent(Tabs)
+    await nextTick()
+
+    const mockRect = vi
+      .spyOn(wrapper.find('#tab-4999').element, 'getBoundingClientRect')
+      .mockReturnValue({ left: 5000 } as DOMRect)
+    const mockComputedStyle = vi
+      .spyOn(window, 'getComputedStyle')
+      .mockReturnValue({ paddingLeft: '0px' } as CSSStyleDeclaration)
+
+    await wrapper.find('#tab-4999').trigger('click')
+    await nextTick()
+
+    expect(tabsWrapper.find('.el-tabs__active-bar').attributes().style).toMatch(
+      'translateX(5000px)'
+    )
+
+    mockRect.mockRestore()
+    mockComputedStyle.mockRestore()
+    wrapper.unmount()
+  })
 })

packages/components/tabs/src/tab-nav.tsx

@@ -3,6 +3,7 @@ import {
   defineComponent,
   getCurrentInstance,
   inject,
+  nextTick,
   onMounted,
   onUpdated,
   ref,
@@ -135,10 +136,12 @@ const TabNav = defineComponent({
       navOffset.value = newOffset
     }
 
-    const scrollToActiveTab = () => {
+    const scrollToActiveTab = async () => {
       const nav = nav$.value
       if (!scrollable.value || !el$.value || !navScroll$.value || !nav) return
 
+      await nextTick()
+
       const activeTab = el$.value.querySelector('.is-active')
       if (!activeTab) return