diff --git a/components/tabs/src/Tabs.tsx b/components/tabs/src/Tabs.tsx index 8ab1fe868..9d94784f2 100644 --- a/components/tabs/src/Tabs.tsx +++ b/components/tabs/src/Tabs.tsx @@ -11,7 +11,7 @@ import type { Tab, } from './interface'; import type { CSSProperties, PropType, ExtractPropTypes } from 'vue'; -import { defineComponent, computed, onMounted, watchEffect, camelize } from 'vue'; +import { ref, defineComponent, computed, onMounted, watchEffect, camelize } from 'vue'; import { flattenChildren, initDefaultProps, isValidElement } from '../../_util/props-util'; import useConfigInject from '../../_util/hooks/useConfigInject'; import useState from '../../_util/hooks/useState'; @@ -181,19 +181,24 @@ const InternalTabs = defineComponent({ }); // ====================== Active Key ====================== - const [mergedActiveKey, setMergedActiveKey] = useMergedState(() => props.tabs[0]?.key, { + // use activeKey & mergedActiveKey to control + // https://github.com/vueComponent/ant-design-vue/issues/5056 + const [activeKey] = useMergedState(() => props.tabs[0]?.key, { value: computed(() => props.activeKey), defaultValue: props.defaultActiveKey, }); + const mergedActiveKey = ref(); const [activeIndex, setActiveIndex] = useState(() => props.tabs.findIndex(tab => tab.key === mergedActiveKey.value), ); watchEffect(() => { - let newActiveIndex = props.tabs.findIndex(tab => tab.key === mergedActiveKey.value); + let newActiveIndex = props.tabs.findIndex(tab => tab.key === activeKey.value); if (newActiveIndex === -1) { newActiveIndex = Math.max(0, Math.min(activeIndex.value, props.tabs.length - 1)); mergedActiveKey.value = props.tabs[newActiveIndex]?.key; + } else { + mergedActiveKey.value = activeKey.value; } setActiveIndex(newActiveIndex); }); @@ -221,9 +226,11 @@ const InternalTabs = defineComponent({ // ======================== Events ======================== const onInternalTabClick = (key: Key, e: MouseEvent | KeyboardEvent) => { props.onTabClick?.(key, e); - - setMergedActiveKey(key); - props.onChange?.(key); + const isActiveChanged = key !== mergedActiveKey.value; + if (isActiveChanged) { + mergedActiveKey.value = key; + props.onChange?.(key); + } }; useProvideTabs({