fix: 修复 tree-select 搜索内容时卡顿 (#5125)

examples/components/Example.jsx

@@ -31,6 +31,7 @@ import FormLayoutTestSchema from './Form/layoutTest';
 import Definitions from './Form/Definitions';
 import AnchorNav from './Form/AnchorNav';
 import InputKVSSchema from './Form/InputKVS';
+import Tree from './Form/Tree';
 
 import TableCrudSchema from './CRUD/Table';
 import TableAutoFillSchema from './CRUD/TableAutoFill';
@@ -301,6 +302,12 @@ export const examples = [
             label: '复杂嵌套数据',
             path: '/examples/form/input-kvs',
             component: makeSchemaRenderer(InputKVSSchema)
+          },
+
+          {
+            label: '树形结构',
+            path: '/examples/form/tree',
+            component: makeSchemaRenderer(Tree)
           }
 
           // {

examples/components/Form/Tree.jsx

@@ -0,0 +1,31 @@
+const options = [...new Array(1000)].map((item, index) => {
+  const value = `${10000 + index * 3}`;
+  return {
+    value: value,
+    label: value
+  };
+});
+
+export default {
+  type: 'form',
+  body: {
+    type: 'tree-select',
+    // "type": "nested-select",
+    name: 'output_fields',
+    label: '输出字段',
+    description: '输出字段中的制表符会转换为"\\t",换行符会转换为"\
+    "',
+    mode: 'horizontal',
+    multiple: true,
+    required: true,
+    clearable: true,
+    withChildren: true,
+    extractValue: true,
+    joinValues: true,
+    cascade: true,
+    borderMode: 'full',
+    searchable: true,
+    options: options,
+    initiallyOpen: false
+  }
+};

packages/amis/src/renderers/Form/TreeSelect.tsx

@@ -162,7 +162,10 @@ export default class TreeSelectControl extends React.Component<
     this.handleFocus = this.handleFocus.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
     this.handleKeyPress = this.handleKeyPress.bind(this);
-    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleInputChange = debouce(this.handleInputChange.bind(this), 150, {
+      trailing: true,
+      leading: false
+    });
     this.handleInputKeyDown = this.handleInputKeyDown.bind(this);
 
     this.loadRemote = debouce(this.loadRemote.bind(this), 250, {