fix: [treeSelect] fix TreeSelect/Tree is wrapped by CheckboxGroup, multiple selections and clicks on any item will be displayed as all selections #750 (#964)

packages/semi-ui/tree/index.tsx

@@ -41,6 +41,7 @@ import {
     KeyEntity,
     OptionProps
 } from './interface';
+import CheckboxGroup from '../checkbox/checkboxGroup';
 
 export * from './interface';
 export { AutoSizerProps } from './autoSizer';
@@ -686,6 +687,8 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
             filteredKeys,
             dragOverNodeKey,
             dropPosition,
+            checkedKeys, 
+            realCheckedKeys,
         } = this.state;
 
         const {
@@ -706,6 +709,7 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
             renderFullLabel,
             labelEllipsis,
             virtualize,
+            checkRelation,
         } = this.props;
         const wrapperCls = cls(`${prefixcls}-wrapper`, className);
         const listCls = cls(`${prefixcls}-option-list`, {
@@ -760,7 +764,12 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
                 <div aria-label={this.props['aria-label']} className={wrapperCls} style={style}>
                     {filterTreeNode ? this.renderInput() : null}
                     <div className={listCls} {...ariaAttr}>
-                        {noData ? this.renderEmpty() : this.renderNodeList()}
+                        {noData ? this.renderEmpty() : (multiple ? 
+                            (<CheckboxGroup value={Array.from(checkRelation === 'related' ? checkedKeys : realCheckedKeys)}>
+                                {this.renderNodeList()}
+                            </CheckboxGroup>) : 
+                            this.renderNodeList()
+                        )}
                     </div>
                 </div>
             </TreeContext.Provider>

packages/semi-ui/tree/treeNode.tsx

@@ -221,7 +221,7 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
     }
 
     renderCheckbox() {
-        const { checked, halfChecked } = this.props;
+        const { checked, halfChecked, eventKey } = this.props;
         const disabled = this.isDisabled();
         return (
             <div
@@ -231,6 +231,7 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
             >
                 <Checkbox
                     aria-label='Toggle the checked state of checkbox'
+                    value={eventKey}
                     indeterminate={halfChecked}
                     checked={checked}
                     disabled={Boolean(disabled)}

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Icon, Button, Form, Popover, Tag, Typography } from '../../index';
+import { Icon, Button, Form, Popover, Tag, Typography, CheckboxGroup } from '../../index';
 import TreeSelect from '../index';
 import { flattenDeep } from 'lodash';
 import CustomTrigger from './CustomTrigger';
@@ -152,6 +152,43 @@ const treeDataWithoutValue = [
   },
 ];
 
+export const TreeSelectWrapper = () => (
+  <div>
+    <div>github issue 750 修改测试用例</div>
+    <CheckboxGroup>
+      <TreeSelect
+        showClear={true}
+        expandAll
+        style={{width: 400}}
+        treeData={[
+            {
+                key: '1',
+                label: '所有节点',
+                value: '1',
+                children: [
+                    { key: '20006251', label: 'Semi', value: '[email protected]' },
+                    { key: '20006248', label: 'Design', value: '[email protected]' },
+                    {
+                        key: '20006205',
+                        label: 'React',
+                        value: '[email protected]',
+                    },
+                ],
+            },
+            ]}
+        multiple
+        filterTreeNode
+        showFilteredOnly={true}
+        leafOnly
+      />
+  </CheckboxGroup>
+  </div>
+);
+
+TreeSelectWrapper.story = {
+  name: 'treeSelect wrapper',
+};
+
 class SimpleTree extends React.Component {
   render() {
     return (

packages/semi-ui/treeSelect/index.tsx

@@ -50,6 +50,7 @@ import { isSemiIcon } from '../_utils';
 import { OptionProps, TreeProps, TreeState, FlattenNode, TreeNodeData, TreeNodeProps } from '../tree/interface';
 import { Motion } from '../_base/base';
 import { IconChevronDown, IconClear, IconSearch } from '@douyinfe/semi-icons';
+import CheckboxGroup from '../checkbox/checkboxGroup';
 
 export type ExpandAction = false | 'click' | 'doubleClick';
 
@@ -1301,7 +1302,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
     };
 
     renderTree = () => {
-        const { keyEntities, motionKeys, motionType, inputValue, filteredKeys, flattenNodes } = this.state;
+        const { keyEntities, motionKeys, motionType, inputValue, filteredKeys, flattenNodes, checkedKeys, realCheckedKeys } = this.state;
         const {
             loadData,
             filterTreeNode,
@@ -1318,6 +1319,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             searchPosition,
             renderLabel,
             renderFullLabel,
+            checkRelation,
         } = this.props;
         const wrapperCls = cls(`${prefixTree}-wrapper`);
         const listCls = cls(`${prefixTree}-option-list`, {
@@ -1362,7 +1364,12 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                         this.renderInput()
                     }
                     <div className={listCls} role="tree" aria-multiselectable={multiple ? true : false} style={optionListStyle}>
-                        {noData ? this.renderEmpty() : this.renderNodeList()}
+                        { noData ? this.renderEmpty() : (multiple ? 
+                            (<CheckboxGroup value={Array.from(checkRelation === 'related' ? checkedKeys : realCheckedKeys)}>
+                                {this.renderNodeList()}
+                            </CheckboxGroup>) : 
+                            this.renderNodeList()
+                        )}
                     </div>
                     {outerBottomSlot}
                 </div>