fix: fixed the problem that the selected items of TreeSelect cannot displayed in multi, customized trigger, and checkRalation is unRelated (#2189)

* fix: Fixed the problem that the selected items of TreeSelect cannot be displayed in multi-select, customized trigger, and checkRalation is unRelated
* fix: add e2e test case for multiple, related, custom trigger TreeSelect

cypress/e2e/treeSelect.spec.js

@@ -151,7 +151,7 @@ describe('treeSelect', () => {
         cy.get('.semi-tree-option').should('have.length', 4);
     });
 
-    it.only('filterTreeNode + loadData', () => {
+    it('filterTreeNode + loadData', () => {
         cy.visit('http://127.0.0.1:6006/iframe.html?id=treeselect--load-data');
         cy.get('.semi-tree-select-selection').eq(0).trigger('click');
         cy.wait(1000);
@@ -160,6 +160,32 @@ describe('treeSelect', () => {
         cy.get('.semi-tree-select-selection').eq(0).trigger('click');
         cy.wait(1000);
         cy.get('.semi-tree-option.semi-tree-option-level-1.semi-tree-option-selected.semi-tree-option-collapsed').should('exist');
+    });
+
+    it('multiple, checkRelation = unRelated, triggerRender', () => {
+        cy.visit("http://127.0.0.1:6006/iframe.html?id=treeselect--trigger-render-add-method");
+        cy.get('.semi-tagInput').eq(1).trigger('click');
+        cy.get('.semi-tree-option').eq(2).trigger('click');
+        cy.get('.semi-tree-option').eq(3).trigger('click');
+        cy.get('.semi-tagInput-wrapper').eq(1).get('.semi-tag-content').should('have.length', 2);
+        cy.get('.semi-tagInput-wrapper').eq(1).get('.semi-tag-content').eq(0).contains('北京');
+        cy.get('.semi-tagInput-wrapper').eq(1).get('.semi-tag-content').eq(1).contains('上海');
+    });
+
+    it('multiple, checkRelation = related, triggerRender', () => {
+        cy.visit("http://127.0.0.1:6006/iframe.html?id=treeselect--trigger-render-add-method");
+        cy.get('.semi-tagInput').eq(0).trigger('click');
+        cy.get('.semi-tree-option').eq(2).trigger('click');
+        cy.get('.semi-tree-option').eq(3).trigger('click');
+        cy.get('.semi-tagInput-wrapper').eq(1).get('.semi-tag-content').should('have.length', 1);
+        cy.get('.semi-tagInput-wrapper').eq(1).get('.semi-tag-content').eq(0).contains('亚洲');
+    });
+
+    it('single, triggerRender', () => {
+        cy.visit("http://127.0.0.1:6006/iframe.html?id=treeselect--trigger-render-add-method");
+        cy.get('.semi-button').eq(0).trigger('click');
+        cy.get('.semi-tree-option').eq(0).trigger('click');
+        cy.get('.semi-button-content-left').eq(0).contains('亚洲');
     })
 });
 

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

@@ -2284,11 +2284,19 @@ export const triggerRenderAddMethod = () => {
 
   return (
     <>
+      <TreeSelect
+          triggerRender={renderTrigger1}
+          treeData={treeData}
+          placeholder='Single, Custom Trigger'
+          onChange={onValueChange}
+          style={{ width: 300 }}
+      />
+      <br />
       <TreeSelect
           triggerRender={renderTrigger1}
           multiple
           treeData={treeData}
-          placeholder='Custom Trigger'
+          placeholder='Multiple, custom Trigger'
           onChange={onValueChange}
           style={{ width: 300 }}
       />
@@ -2305,6 +2313,7 @@ export const triggerRenderAddMethod = () => {
       />
       <br />
       <TreeSelect
+          defaultExpandAll
           triggerRender={renderTrigger3}
           filterTreeNode
           searchPosition="trigger"
@@ -2314,6 +2323,19 @@ export const triggerRenderAddMethod = () => {
           onChange={onValueChange}
           style={{ width: 300 }}
       />
+      <br />
+       <TreeSelect
+          defaultExpandAll
+          checkRelation={'unRelated'} 
+          triggerRender={renderTrigger3}
+          filterTreeNode
+          searchPosition="trigger"
+          multiple
+          treeData={treeData}
+          placeholder='multiple, checkRelation = unRelated'
+          onChange={onValueChange}
+          style={{ width: 300 }}
+      />
     </>
   );
 }

packages/semi-ui/treeSelect/index.tsx

@@ -1082,9 +1082,10 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             searchPosition,
             triggerRender,
             borderless,
+            checkRelation,
             ...rest
         } = this.props;
-        const { inputValue, selectedKeys, checkedKeys, keyEntities, isFocus } = this.state;
+        const { inputValue, selectedKeys, checkedKeys, keyEntities, isFocus, realCheckedKeys } = this.state;
         const filterable = Boolean(filterTreeNode);
         const useCustomTrigger = typeof triggerRender === 'function';
         const mouseEvent = showClear ?
@@ -1119,9 +1120,19 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                 },
                 className
             );
-        const triggerRenderKeys = multiple ? normalizeKeyList([...checkedKeys], keyEntities, leafOnly, true) : selectedKeys;
-        const inner = useCustomTrigger ? (
-            <Trigger
+        let inner: React.ReactNode | React.ReactNode[];
+        if (useCustomTrigger) {
+            let triggerRenderKeys = [];
+            if (multiple) {
+                if (checkRelation === 'related') {
+                    triggerRenderKeys = normalizeKeyList([...checkedKeys], keyEntities, leafOnly, true);
+                } else if (checkRelation === 'unRelated') {
+                    triggerRenderKeys = [...realCheckedKeys];
+                }
+            } else {
+                triggerRenderKeys = selectedKeys;
+            }
+            inner = <Trigger
                 inputValue={inputValue}
                 value={triggerRenderKeys.map((key: string) => get(keyEntities, [key, 'data']))}
                 disabled={disabled}
@@ -1132,9 +1143,9 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                 componentProps={{ ...this.props }}
                 onSearch={this.search}
                 onRemove={this.removeTag}
-            />
-        ) : (
-            [
+            />;
+        } else {
+            inner = [
                 <Fragment key={'prefix'}>{prefix || insetLabel ? this.renderPrefix() : null}</Fragment>,
                 <Fragment key={'selection'}>
                     <div className={`${prefixcls}-selection`}>{this.renderSelectContent()}</div>
@@ -1148,8 +1159,8 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                     }
                 </Fragment>,
                 <Fragment key={'arrow'}>{this.renderArrow()}</Fragment>,
-            ]
-        );
+            ];
+        }
         const tabIndex = disabled ? null : 0;
         /**
          * Reasons for disabling the a11y eslint rule: