From e5ead06d1222b7974a7bd5e70ce0e31993a29c80 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 13 Nov 2021 19:35:44 +0800
Subject: [PATCH] fix(Tabbar): before-change not work in route mode (#9856)

* fix(Tabbar): before-change not work in route mode

* fix: upd

* test: add test case
---
 package.json                                 |  1 +
 packages/vant/src/tabbar-item/TabbarItem.tsx |  7 ++---
 packages/vant/src/tabbar/Tabbar.tsx          | 21 +++++++--------
 packages/vant/src/tabbar/test/index.spec.tsx | 28 ++++++++++++++++++++
 4 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index fb494a7b8..7ab3d63b2 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
     "dev": "pnpm dev --dir ./packages/vant",
     "lint": "pnpm lint --dir ./packages/vant",
     "test": "pnpm test --dir ./packages/vant",
+    "test:watch": "pnpm test:watch --dir ./packages/vant",
     "build": "pnpm build --dir ./packages/vant",
     "build:site": "pnpm build:site --dir ./packages/vant"
   },
diff --git a/packages/vant/src/tabbar-item/TabbarItem.tsx b/packages/vant/src/tabbar-item/TabbarItem.tsx
index d91f529e2..cb41e8fd7 100644
--- a/packages/vant/src/tabbar-item/TabbarItem.tsx
+++ b/packages/vant/src/tabbar-item/TabbarItem.tsx
@@ -63,13 +63,14 @@ export default defineComponent({
         return pathMatched || nameMatched;
       }
 
-      return (props.name || index.value) === modelValue;
+      return (props.name ?? index.value) === modelValue;
     });
 
     const onClick = (event: MouseEvent) => {
-      parent.setActive(props.name ?? index.value);
+      if (!active.value) {
+        parent.setActive(props.name ?? index.value, route);
+      }
       emit('click', event);
-      route();
     };
 
     const renderIcon = () => {
diff --git a/packages/vant/src/tabbar/Tabbar.tsx b/packages/vant/src/tabbar/Tabbar.tsx
index 22d6c5dab..9c3a1c8cf 100644
--- a/packages/vant/src/tabbar/Tabbar.tsx
+++ b/packages/vant/src/tabbar/Tabbar.tsx
@@ -44,7 +44,7 @@ export type TabbarProps = ExtractPropTypes<typeof tabbarProps>;
 
 export type TabbarProvide = {
   props: TabbarProps;
-  setActive: (active: number | string) => void;
+  setActive: (active: number | string, afterChange: () => void) => void;
 };
 
 export const TABBAR_KEY: InjectionKey<TabbarProvide> = Symbol(name);
@@ -83,16 +83,15 @@ export default defineComponent({
       );
     };
 
-    const setActive = (active: number | string) => {
-      if (active !== props.modelValue) {
-        callInterceptor(props.beforeChange, {
-          args: [active],
-          done() {
-            emit('update:modelValue', active);
-            emit('change', active);
-          },
-        });
-      }
+    const setActive = (active: number | string, afterChange: () => void) => {
+      callInterceptor(props.beforeChange, {
+        args: [active],
+        done() {
+          emit('update:modelValue', active);
+          emit('change', active);
+          afterChange();
+        },
+      });
     };
 
     linkChildren({ props, setActive });
diff --git a/packages/vant/src/tabbar/test/index.spec.tsx b/packages/vant/src/tabbar/test/index.spec.tsx
index 558ba95a6..5f2ae7562 100644
--- a/packages/vant/src/tabbar/test/index.spec.tsx
+++ b/packages/vant/src/tabbar/test/index.spec.tsx
@@ -69,6 +69,34 @@ test('should match active tab by route path in route mode', async () => {
   expect(items[3].classes()).not.toContain(activeClass);
 });
 
+test('should allow to use before-change prop in route mode', async () => {
+  const wrapper = mount(
+    {
+      render: () => (
+        <Tabbar route beforeChange={() => false}>
+          <TabbarItem replace to="/">
+            Tab
+          </TabbarItem>
+          <TabbarItem replace to="/search">
+            Tab
+          </TabbarItem>
+        </Tabbar>
+      ),
+    },
+    {
+      global: {
+        mocks: getMockRouter(),
+      },
+    }
+  );
+
+  const items = wrapper.findAll('.van-tabbar-item');
+  expect(items[0].classes()).toContain(activeClass);
+
+  await items[1].trigger('click');
+  expect(items[1].classes()).not.toContain(activeClass);
+});
+
 test('should match active tab by route name in route mode', async () => {
   const wrapper = mount(
     {