fix: tabs not update, close #5056

Author: tangjinzhou

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<Key>(() => props.tabs[0]?.key, {
+    // use activeKey & mergedActiveKey to control
+    // https://github.com/vueComponent/ant-design-vue/issues/5056
+    const [activeKey] = useMergedState<Key>(() => props.tabs[0]?.key, {
       value: computed(() => props.activeKey),
       defaultValue: props.defaultActiveKey,
     });
+    const mergedActiveKey = ref<Key>();
     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({