From 41cfae4aa6b1423c0867403d42e21f83c869d4a0 Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Sun, 18 Sep 2022 22:06:37 +0800
Subject: [PATCH] fix(Tabs): incorrect scroll position when inited (#11059)

---
 .../test/__snapshots__/index.spec.ts.snap     |  2 +-
 packages/vant/src/tabs/Tabs.tsx               | 41 ++++++++++---------
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap
index 5cd2ac886..6dcf78359 100644
--- a/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap
+++ b/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap
@@ -346,7 +346,7 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
           </span>
         </div>
         <div class="van-tabs__line"
-             style="transform: translateX(50px) translateX(-50%);"
+             style="transform: translateX(50px) translateX(-50%); transition-duration: 0.3s;"
         >
         </div>
       </div>
diff --git a/packages/vant/src/tabs/Tabs.tsx b/packages/vant/src/tabs/Tabs.tsx
index f86e89e81..d2e5eda8b 100644
--- a/packages/vant/src/tabs/Tabs.tsx
+++ b/packages/vant/src/tabs/Tabs.tsx
@@ -239,7 +239,10 @@ export default defineComponent({
       }
     };
 
-    const setCurrentIndex = (currentIndex: number) => {
+    const setCurrentIndex = (
+      currentIndex: number,
+      skipScrollIntoView?: boolean
+    ) => {
       const newIndex = findAvailableTab(currentIndex);
 
       if (!isDef(newIndex)) {
@@ -259,16 +262,31 @@ export default defineComponent({
           emit('change', newName, newTab.title);
         }
       }
+
+      if (!skipScrollIntoView) {
+        scrollIntoView();
+      }
+      setLine();
+
+      // scroll to correct position
+      if (stickyFixed && !props.scrollspy) {
+        setRootScrollTop(
+          Math.ceil(getElementTop(root.value!) - offsetTopPx.value)
+        );
+      }
     };
 
     // correct the index of active tab
-    const setCurrentIndexByName = (name: Numeric) => {
+    const setCurrentIndexByName = (
+      name: Numeric,
+      skipScrollIntoView?: boolean
+    ) => {
       const matched = children.find(
         (tab, index) => getTabName(tab, index) === name
       );
 
       const index = matched ? children.indexOf(matched) : 0;
-      setCurrentIndex(index);
+      setCurrentIndex(index, skipScrollIntoView);
     };
 
     const scrollToCurrentContent = (immediate = false) => {
@@ -449,23 +467,8 @@ export default defineComponent({
       }
     );
 
-    watch(
-      () => state.currentIndex,
-      () => {
-        scrollIntoView();
-        setLine();
-
-        // scroll to correct position
-        if (stickyFixed && !props.scrollspy) {
-          setRootScrollTop(
-            Math.ceil(getElementTop(root.value!) - offsetTopPx.value)
-          );
-        }
-      }
-    );
-
     const init = () => {
-      setCurrentIndexByName(props.active);
+      setCurrentIndexByName(props.active, true);
       nextTick(() => {
         state.inited = true;
         if (wrapRef.value) {