docs: [TreeSelect] custom trigger example optimization (#1521)

content/input/treeselect/index-en-US.md

@@ -1225,8 +1225,8 @@ interface triggerRenderProps {
     /* It is used to start the search when the value of the Input box is updated. 
      * When you update the value of the Input component customized by triggerRender, 
      * you should call this function to synchronize the state with the TreeSelect 
-     * internally. you need to set the filterTreeNode parameter to non-false when use it
-     * It is supported from v2.32.0
+     * internally. you need to set the filterTreeNode parameter to non-false when use it,
+     * and set searchPosition to 'trigger'. It is supported from v2.32.0
      */
     onSearch: inputValue => void;   
 }
@@ -1275,7 +1275,7 @@ function Demo() {
     });
 
     const renderTrigger = useCallback((props) => {
-        const { value, onSearch, onRemove } = props;
+        const { value, onSearch, onRemove, inputValue } = props;
         const tagInputValue = value.map(item => item.key);
         const renderTagInMultiple = (key) => {
             const label = value.find(item => item.key === key).label;
@@ -1286,7 +1286,7 @@ function Demo() {
         };
         return (
             <TagInput
-                style={{ width: 250 }}
+                inputValue={inputValue}
                 value={tagInputValue}
                 onInputChange={onSearch}
                 renderTagItem={renderTagInMultiple}
@@ -1298,6 +1298,7 @@ function Demo() {
         <TreeSelect
             triggerRender={renderTrigger}
             filterTreeNode
+            searchPosition="trigger"
             multiple
             treeData={treeData}
             placeholder='Custom Trigger'

content/input/treeselect/index.md

@@ -1193,6 +1193,7 @@ interface TriggerRenderProps {
      * 用于在 Input 框值更新时候启动搜索，当你在 triggerRender 自定义的
      * Input 组件值更新时，你应该调用该函数，用于向 TreeSelect 内部
      * 同步状态, 使用同时需要设置 filterTreeNode 参数非 false, 
+     * searchPosition 为 'trigger'
      * 从 v2.32.0 版本开始支持
     */
     onSearch: inputValue => void;   
@@ -1241,7 +1242,7 @@ function Demo() {
     });
 
     const renderTrigger = useCallback((props) => {
-        const { value, onSearch, onRemove } = props;
+        const { value, onSearch, onRemove, inputValue } = props;
         const tagInputValue = value.map(item => item.key);
         const renderTagInMultiple = (key) => {
             const label = value.find(item => item.key === key).label;
@@ -1252,7 +1253,7 @@ function Demo() {
         };
         return (
             <TagInput
-                style={{ width: 250 }}
+                inputValue={inputValue}
                 value={tagInputValue}
                 onInputChange={onSearch}
                 renderTagItem={renderTagInMultiple}
@@ -1264,6 +1265,7 @@ function Demo() {
         <TreeSelect
             triggerRender={renderTrigger}
             filterTreeNode
+            searchPosition="trigger"
             multiple
             treeData={treeData}
             placeholder='Custom Trigger'

packages/semi-foundation/treeSelect/foundation.ts

@@ -49,7 +49,7 @@ export interface BasicTriggerRenderProps {
     value: BasicTreeNodeData[];
     onClear: (e: any) => void;
     onSearch: (inputValue: string) => void;
-    onRemove: (value: string) => void
+    onRemove: (key: string) => void
 }
 
 export type BasicOnChangeWithObject = (node: BasicTreeNodeData[] | BasicTreeNodeData, e: any) => void;

packages/semi-ui/treeSelect/_story/treeSelect.stories.jsx

@@ -2197,7 +2197,7 @@ export const triggerRenderAddMethod = () => {
   }, []);
 
   const renderTrigger3 = useCallback((props) => {
-    const { value, onSearch, onRemove } = props;
+    const { value, onSearch, onRemove, inputValue } = props;
     const tagInputValue = value.map(item => item.key);
     const renderTagInMultiple = (key) => {
       const label = value.find(item => item.key === key).label;
@@ -2208,7 +2208,7 @@ export const triggerRenderAddMethod = () => {
     }
     return (
       <TagInput
-        style={{ width: 250 }}
+        inputValue={inputValue}
         value={tagInputValue}
         onInputChange={onSearch}
         renderTagItem={renderTagInMultiple}
@@ -2230,6 +2230,7 @@ export const triggerRenderAddMethod = () => {
       <TreeSelect
           triggerRender={renderTrigger2}
           filterTreeNode
+          searchPosition="trigger"
           multiple
           treeData={treeData}
           placeholder='Custom Trigger'
@@ -2240,6 +2241,7 @@ export const triggerRenderAddMethod = () => {
       <TreeSelect
           triggerRender={renderTrigger3}
           filterTreeNode
+          searchPosition="trigger"
           multiple
           treeData={treeData}
           placeholder='Custom Trigger'