fix(pro:tree): onSearch cannot get the latest searchValue value

packages/pro/tree/__tests__/proTree.spec.ts

@@ -408,13 +408,19 @@ describe('ProTree', () => {
     expect(wrapper.find('.ix-icon-uncollapse').exists()).toBe(false)
   })
 
-  test('searchValue work', async () => {
+  test('searchValue.sync work', async () => {
+    const onSearch = vi.fn()
+    const onUpdateSearch = vi.fn()
     const wrapper = ProTreeMount({
       props: {
         searchValue: 'Node 0-0',
+        onSearch,
+        'onUpdate:searchValue': onUpdateSearch,
       },
     })
 
+    const input = wrapper.find('.ix-pro-tree-search-wrapper .ix-input-inner')
+
     const allNodes = wrapper.findAll('.ix-tree-node')
 
     expect(allNodes[1].find('.ix-tree-node-content-label-highlight').exists()).toBe(true)
@@ -424,6 +430,11 @@ describe('ProTree', () => {
     })
 
     expect(allNodes[1].find('.ix-tree-node-content-label-highlight').exists()).toBe(false)
+
+    await input.setValue('search text')
+
+    expect(onSearch).toBeCalledWith('search text')
+    expect(onUpdateSearch).toBeCalledWith('search text')
   })
 
   test('expandAll and collapseAll work', async () => {

packages/pro/tree/demo/Basic.vue

@@ -9,6 +9,7 @@
     :style="{ height: '400px' }"
     :checkable="true"
     :dataSource="treeData"
+    :onSearch="onSearch"
   >
     <template #header>
       <IxHeader size="sm">
@@ -26,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { nextTick, ref } from 'vue'
 
 const treeData = [
   {
@@ -119,6 +120,16 @@ const handleDelete = (evt: Event) => {
 const handleAdd = () => {
   console.log('add')
 }
+
+const onSearch = (searchVal: string) => {
+  console.log('searchVal', searchVal)
+  if (searchVal === '') {
+    // 处理每次搜索清空后选项全部收缩问题
+    nextTick(() => {
+      expandedKeys.value = ['0', '0-1']
+    })
+  }
+}
 </script>
 
 <style lang="less">

packages/pro/tree/docs/Index.zh.md

@@ -19,6 +19,7 @@ subtitle: 高级树型控件
 | `v-model:loadedKeys` | 已经加载完毕的节点的 `key` | `VKey[]` | - | - | - |
 | `v-model:selectedKeys` | 选中节点的 `key` 数组 | `VKey[]` | - | - | - |
 | `v-model:collapsed` | 树是否收缩 | `boolean` | - | - | 不设置时没有收缩展开功能 |
+| `v-model:searchValue` | 用于搜索的值 | `string` | - | - | - |
 | `checkable` | 是否显示选择框 | `boolean` | `false` | - | - |
 | `childrenKey` | 替代[TreeNode](#TreeNode)中的`children`字段 | `string` | `children` | - | - |
 | `cascaderStrategy` | 勾选策略 | `'all' \| 'parent' \| 'child'` | `'all'` | - | 设置勾选策略来指定显示的勾选节点，`all` 表示显示全部选中节点；`parent` 表示只显示父节点（当父节点下所有子节点都选中时）；`child` 表示只显示子节点，仅当`cascade`为`true`时，`parent`和`child`才生效 |
@@ -40,7 +41,6 @@ subtitle: 高级树型控件
 | `loadChildren` | 加载子节点数据 | `(node: TreeNode) => Promise<TreeNode[]>` | - | - | - |
 | `searchable` | 是否拥有搜索功能 | `boolean` | `true` | - | - |
 | `searchFn` | 搜索函数 | `(node: TreeNode, searchValue?: string) => boolean` | - | - | - |
-| `searchValue` | 用于搜索的值 | `string` | - | - | -
 | `selectable` | 是否允许选择 | `boolean \| 'multiple'` | `true` | - | 为 `multiple` 时表示允许多选 |
 | `showLine` | 是否显示连接线 | `boolean` | `true` | - | - |
 | `placeholder` | 搜索框的`placeholder` | `string` | - | - | - |

packages/pro/tree/src/ProTree.tsx

@@ -65,8 +65,9 @@ export default defineComponent({
     }
 
     const handleInput = (evt: Event) => {
-      setSearchValue((evt.target as HTMLInputElement).value)
-      callEmit(props.onSearch, searchValue.value)
+      const inputValue = (evt.target as HTMLInputElement).value
+      setSearchValue(inputValue)
+      callEmit(props.onSearch, inputValue)
     }
 
     const handleClear = (evt: Event) => {

packages/pro/tree/src/types.ts

@@ -92,6 +92,7 @@ export const proTreeProps = {
   'onUpdate:expandedKeys': [Function, Array] as PropType<MaybeArray<(keys: any[]) => void>>,
   'onUpdate:loadedKeys': [Function, Array] as PropType<MaybeArray<(keys: any[]) => void>>,
   'onUpdate:selectedKeys': [Function, Array] as PropType<MaybeArray<(keys: any[]) => void>>,
+  'onUpdate:searchValue': [Function, Array] as PropType<MaybeArray<(searchValue: string) => void>>,
 } as const
 
 export interface ProTreeBindings<K = VKey> {