fix(TreeSelect): should sync value before trigger click-item event (#5153)

src/tree-select/index.tsx

@@ -97,9 +97,8 @@ function TreeSelect(
               }
             }
 
-            emit(ctx, 'click-item', item);
             emit(ctx, 'update:active-id', newActiveId);
-
+            emit(ctx, 'click-item', item);
             // compatible for old usage, should be removed in next major version
             emit(ctx, 'itemclick', item);
           }
@@ -119,9 +118,8 @@ function TreeSelect(
         class={bem('nav')}
         activeKey={mainActiveIndex}
         onChange={(index: number) => {
-          emit(ctx, 'click-nav', index);
           emit(ctx, 'update:main-active-index', index);
-
+          emit(ctx, 'click-nav', index);
           // compatible for old usage, should be removed in next major version
           emit(ctx, 'navclick', index);
         }}

src/tree-select/test/index.spec.js

@@ -295,3 +295,37 @@ test('className of nav', () => {
   const items = wrapper.findAll('.van-tree-select__nav-item');
   expect(items.at(0).element.classList.contains('my-class')).toBeTruthy();
 });
+
+test('should sync value before trigger click-item event', done => {
+  const wrapper = mount({
+    template: `
+      <van-tree-select
+        :items="items"
+        :main-active-index="0"
+        :active-id.sync="activeId"
+        @click-item="onClickItem"
+      />
+    `,
+    data() {
+      return {
+        activeId: mockItem.id,
+        mainActiveIndex: 0,
+        items: [
+          {
+            text: 'group1',
+            children: [mockItem, mockItem2]
+          }
+        ]
+      };
+    },
+    methods: {
+      onClickItem() {
+        expect(wrapper.vm.activeId).toEqual(mockItem2.id);
+        done();
+      }
+    }
+  });
+
+  const items = wrapper.findAll('.van-tree-select__item');
+  items.at(1).trigger('click');
+});