From 8444c6f2f03b4a43102245acce43539c480d2d06 Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Sat, 24 Sep 2022 22:59:47 +0800
Subject: [PATCH] fix(Tabs): incorrect scroll position in some cases (#11085)

---
 .../test/__snapshots__/index.spec.ts.snap     |  2 +-
 packages/vant/src/tab/Tab.tsx                 | 19 +++++++++++++++++--
 .../test/__snapshots__/index.spec.tsx.snap    |  4 ++--
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
index e54dfa74d..3f601e500 100644
--- a/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
+++ b/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
@@ -111,7 +111,7 @@ exports[`should update tabs when previous tab is clicked 1`] = `
         <div style="transition-duration: 0ms; transform: translateX(0px); width: 200px;"
              class="van-swipe__track"
         >
-          <div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
+          <div class="van-swipe-item van-tab__panel-wrapper"
                id="van-tab"
                role="tabpanel"
                tabindex="-1"
diff --git a/packages/vant/src/tab/Tab.tsx b/packages/vant/src/tab/Tab.tsx
index 908a9e5f0..dd2baaa31 100644
--- a/packages/vant/src/tab/Tab.tsx
+++ b/packages/vant/src/tab/Tab.tsx
@@ -21,7 +21,7 @@ import {
 import { TABS_KEY } from '../tabs/Tabs';
 
 // Composables
-import { useParent } from '@vant/use';
+import { doubleRaf, useParent } from '@vant/use';
 import { useId } from '../composables/use-id';
 import { useExpose } from '../composables/use-expose';
 import { routeProps } from '../composables/use-route';
@@ -84,6 +84,21 @@ export default defineComponent({
       return isActive;
     });
 
+    const hasInactiveClass = ref(!active.value);
+
+    watch(active, (val) => {
+      if (val) {
+        hasInactiveClass.value = false;
+      } else {
+        // mark tab as inactive until the active tab is rendered
+        // to avoid incorrect scroll position or other render issue
+        // https://github.com/youzan/vant/issues/11050
+        doubleRaf(() => {
+          hasInactiveClass.value = true;
+        });
+      }
+    });
+
     watch(
       () => props.title,
       () => {
@@ -109,7 +124,7 @@ export default defineComponent({
           <SwipeItem
             id={id}
             role="tabpanel"
-            class={bem('panel-wrapper', { inactive: !active.value })}
+            class={bem('panel-wrapper', { inactive: hasInactiveClass.value })}
             tabindex={active.value ? 0 : -1}
             aria-hidden={!active.value}
             aria-labelledby={label}
diff --git a/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap b/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap
index 14b522915..86cd71cc0 100644
--- a/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap
+++ b/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap
@@ -470,7 +470,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
       <div style="transition-duration: 300ms; transform: translateX(-100px); width: 300px;"
            class="van-swipe__track"
       >
-        <div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
+        <div class="van-swipe-item van-tab__panel-wrapper"
              id="van-tab"
              role="tabpanel"
              tabindex="-1"
@@ -560,7 +560,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
       <div style="transition-duration: 300ms; transform: translateX(-200px); width: 300px;"
            class="van-swipe__track"
       >
-        <div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
+        <div class="van-swipe-item van-tab__panel-wrapper"
              id="van-tab"
              role="tabpanel"
              tabindex="-1"