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"