From 72bd72430889a6cf8d86e9ee149ee0b0950f6ed9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Tue, 16 May 2023 17:42:59 +0800
Subject: [PATCH] docs: update TreeSelect faq (#42403)

---
 components/tree-select/index.en-US.md | 20 +++++++++++++++++++-
 components/tree-select/index.zh-CN.md | 20 +++++++++++++++++++-
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/components/tree-select/index.en-US.md b/components/tree-select/index.en-US.md
index f8e22ed9d4..3972199c85 100644
--- a/components/tree-select/index.en-US.md
+++ b/components/tree-select/index.en-US.md
@@ -48,7 +48,7 @@ Tree selection control.
 | getPopupContainer | To set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body |  |
 | labelInValue | Whether to embed label in value, turn the format of value from `string` to {value: string, label: ReactNode, halfChecked: string\[]} | boolean | false |  |
 | listHeight | Config popup height | number | 256 |  |
-| loadData | Load data asynchronously | function(node) | - |  |
+| loadData | Load data asynchronously. Will not load when filtering. Check FAQ for more info | function(node) | - |  |
 | maxTagCount | Max tag count to show. `responsive` will cost render performance | number \| `responsive` | - | responsive: 4.10 |
 | maxTagPlaceholder | Placeholder for not showing tags | ReactNode \| function(omittedValues) | - |  |
 | maxTagTextLength | Max tag text length to show | number | - |  |
@@ -121,3 +121,21 @@ We don't provide this since performance consideration. You can get by this way:
 ### Why sometime customize Option cause scroll break?
 
 You can ref Select [FAQ](/components/select).
+
+### Why `loadData` not trigger when searching?
+
+In earlier version, `loadData` will be triggered when searching. But we got feedback that it will block network when inputting. So we change it to not trigger `loadData` when searching. But you can still handle async logic by `filterTreeNode`:
+
+```tsx
+<TreeSelect
+  filterTreeNode={(input, treeNode) => {
+    const match = YOUR_LOGIC_HERE;
+
+    if (match && !treeNode.isLeaf && !treeNode.children) {
+      // Do some loading logic
+    }
+
+    return match;
+  }}
+/>
+```
diff --git a/components/tree-select/index.zh-CN.md b/components/tree-select/index.zh-CN.md
index 7832ade554..c2341d59a9 100644
--- a/components/tree-select/index.zh-CN.md
+++ b/components/tree-select/index.zh-CN.md
@@ -49,7 +49,7 @@ demo:
 | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body |  |
 | labelInValue | 是否把每个选项的 label 包装到 value 中，会把 value 类型从 `string` 变为 {value: string, label: ReactNode, halfChecked(treeCheckStrictly 时有效): string\[] } 的格式 | boolean | false |  |
 | listHeight | 设置弹窗滚动高度 | number | 256 |  |
-| loadData | 异步加载数据 | function(node) | - |  |
+| loadData | 异步加载数据。在过滤时不会调用以防止网络堵塞，可参考 FAQ 获得更多内容 | function(node) | - |  |
 | maxTagCount | 最多显示多少个 tag，响应式模式会对性能产生损耗 | number \| `responsive` | - | responsive: 4.10 |
 | maxTagPlaceholder | 隐藏 tag 时显示的内容 | ReactNode \| function(omittedValues) | - |  |
 | maxTagTextLength | 最大显示的 tag 文本长度 | number | - |  |
@@ -122,3 +122,21 @@ demo:
 ### 自定义 Option 样式导致滚动异常怎么办？
 
 请参考 Select 的 [FAQ](/components/select-cn)。
+
+### 为何在搜索时 `loadData` 不会触发展开？
+
+在 v4 alpha 版本中，默认在搜索时亦会进行搜索。但是经反馈，在输入时会快速阻塞网络。因而改为搜索不触发 `loadData`。但是你仍然可以通过 `filterTreeNode` 处理异步加载逻辑：
+
+```tsx
+<TreeSelect
+  filterTreeNode={(input, treeNode) => {
+    const match = YOUR_LOGIC_HERE;
+
+    if (match && !treeNode.isLeaf && !treeNode.children) {
+      // Do some loading logic
+    }
+
+    return match;
+  }}
+/>
+```