@douyinfe/semi-ui 2.6.0 → 2.7.0-beta.0

package/lib/es/datePicker/insetInput.js

@@ -0,0 +1,65 @@
+import _get from "lodash/get";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import React from 'react';
+import Input from '../input';
+export function InsetDateInput(props) {
+  const {
+    insetInputValue,
+    valuePath,
+    onFocus,
+    onChange,
+    placeholder,
+    forwardRef
+  } = props;
+
+  const value = _get(insetInputValue, valuePath);
+
+  return /*#__PURE__*/React.createElement(Input, {
+    value: value,
+    onChange: (value, event) => {
+      onChange({
+        value,
+        event,
+        insetInputValue,
+        valuePath
+      });
+    },
+    onFocus: onFocus,
+    placeholder: placeholder,
+    ref: forwardRef
+  });
+}
+export function InsetTimeInput(props) {
+  const {
+    insetInputValue,
+    valuePath,
+    type,
+    onFocus,
+    onChange,
+    placeholder,
+    disabled
+  } = props;
+
+  const _isTimeType = _includesInstanceProperty(type).call(type, 'Time');
+
+  if (!_isTimeType) {
+    return null;
+  }
+
+  const value = _get(insetInputValue, valuePath);
+
+  return /*#__PURE__*/React.createElement(Input, {
+    value: value,
+    onChange: (value, event) => {
+      onChange({
+        value,
+        event,
+        insetInputValue,
+        valuePath
+      });
+    },
+    onFocus: onFocus,
+    placeholder: placeholder,
+    disabled: disabled
+  });
+}

package/lib/es/datePicker/monthsGrid.js

@@ -9,6 +9,8 @@ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/ins
 
 /* eslint-disable jsx-a11y/interactive-supports-focus,jsx-a11y/click-events-have-key-events */
 
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
 /* eslint-disable react/no-did-update-set-state */
 
 /* eslint-disable max-len */
@@ -284,6 +286,9 @@ export default class MonthsGrid extends BaseComponent {
       monthRight,
       currentPanelHeight
     } = this.state;
+    const {
+      insetInput
+    } = this.props;
     const panelDetail = panelType === strings.PANEL_TYPE_RIGHT ? monthRight : monthLeft;
     const {
       isTimePickerOpen,
@@ -306,7 +311,7 @@ export default class MonthsGrid extends BaseComponent {
         style.minWidth = wrap.getBoundingClientRect().width;
       }
 
-      if (this.leftIsYearOrTime() && this.rightIsYearOrTime()) {
+      if (this.leftIsYearOrTime() && this.rightIsYearOrTime() && !insetInput) {
         /**
          * left和right同时为tpk时，panel会有一个minHeight
          * 如果缓存的currentPanelHeight为0，则需要计算滚动列表的高度
@@ -316,7 +321,7 @@ export default class MonthsGrid extends BaseComponent {
          * When left and right are tpk at the same time, the panel will have a minHeight
          * If the cached currentPanelHeight is 0, you need to calculate the height of the scrolling list
          * If there is a cached value, use currentPanelHeight (if this height is less than the actual value, it will affect the number of cycles in the ScrollList to render the list)
-         * See packages/semi-foundation/scrollList/itemF oundation.js initWheelList function
+         * See packages/semi-foundation/scrollList/itemFoundation.js initWheelList function
          */
         style.minHeight = currentPanelHeight ? currentPanelHeight : this.calcScrollListHeight();
       }
@@ -324,10 +329,14 @@ export default class MonthsGrid extends BaseComponent {
       monthCls = classnames(monthCls, "".concat(prefixCls, "-yam-showing"));
     }
 
+    const _isDatePanelOpen = !(isYearPickerOpen || isTimePickerOpen);
+
+    const xOpenType = _isDatePanelOpen ? 'date' : isYearPickerOpen ? 'year' : 'time';
     return /*#__PURE__*/React.createElement("div", {
       className: monthCls,
       key: panelType,
-      style: style
+      style: style,
+      "x-open-type": xOpenType
     }, yearAndMonthLayer, timePickerLayer, this.foundation.isRangeType() ? panelContent : isYearPickerOpen || isTimePickerOpen ? null : panelContent, this.renderSwitch(panelType));
   }
 
@@ -538,10 +547,11 @@ export default class MonthsGrid extends BaseComponent {
       locale,
       disabledTimePicker,
       density,
-      dateFnsLocale
-    } = this.props; // Type: date, dateRange, year, month, no rendering required
+      dateFnsLocale,
+      insetInput
+    } = this.props; // Type: date, dateRange, year, month, inset input no rendering required
 
-    if (!_includesInstanceProperty(type).call(type, 'Time')) {
+    if (!_includesInstanceProperty(type).call(type, 'Time') || insetInput) {
       return null;
     } // switch year/month & time
 
@@ -614,7 +624,8 @@ export default class MonthsGrid extends BaseComponent {
       monthRight
     } = this.state;
     const {
-      type
+      type,
+      insetInput
     } = this.props;
     const monthGridCls = classnames({
       ["".concat(prefixCls, "-month-grid")]: true
@@ -636,6 +647,7 @@ export default class MonthsGrid extends BaseComponent {
       className: monthGridCls,
       "x-type": type,
       "x-panel-yearandmonth-open-type": yearOpenType,
+      "x-insetInput": insetInput ? "true" : "false",
       ref: current => this.cacheRefCurrent('monthGrid', current)
     }, content);
   }

package/lib/es/tree/index.js

@@ -216,7 +216,8 @@ class Tree extends BaseComponent {
     const isSeaching = Boolean(props.filterTreeNode && prevState.inputValue && prevState.inputValue.length);
     const newState = {
       prevProps: props
-    }; // Accept a props field as a parameter to determine whether to update the field
+    };
+    const isExpandControlled = ('expandedKeys' in props); // Accept a props field as a parameter to determine whether to update the field
 
     const needUpdate = name => {
       const firstInProps = !prevProps && name in props;
@@ -260,7 +261,8 @@ class Tree extends BaseComponent {
       }
     }
 
-    const expandAllWhenDataChange = (needUpdate('treeDataSimpleJson') || needUpdate('treeData')) && props.expandAll;
+    const dataUpdated = needUpdate('treeDataSimpleJson') || needUpdate('treeData');
+    const expandAllWhenDataChange = dataUpdated && props.expandAll;
 
     if (!isSeaching) {
       // Update expandedKeys
@@ -286,7 +288,7 @@ class Tree extends BaseComponent {
         newState.expandedKeys = calcExpandedKeys(props.defaultExpandedKeys, keyEntities);
       } else if (!prevProps && props.defaultValue) {
         newState.expandedKeys = calcExpandedKeysForValues(props.defaultValue, keyEntities, props.multiple, valueEntities);
-      } else if (!prevProps && props.value) {
+      } else if ((!prevProps || !isExpandControlled && dataUpdated) && props.value) {
         newState.expandedKeys = calcExpandedKeysForValues(props.value, keyEntities, props.multiple, valueEntities);
       }
 

package/lib/es/tree/interface.d.ts

@@ -109,6 +109,7 @@ export interface NodeListProps {
     motionKeys: Set<string>;
     motionType: string;
     flattenList: FlattenNode[] | undefined;
+    searchTargetIsDeep?: boolean;
     renderTreeNode: (treeNode: FlattenNode, ind?: number, style?: React.CSSProperties) => ReactNode;
 }
 export declare type TransitionNodes<T> = Array<T | Array<T>>;

package/lib/es/tree/nodeList.js

@@ -83,12 +83,13 @@ export default class NodeList extends PureComponent {
     const {
       flattenNodes,
       motionType,
+      searchTargetIsDeep,
       renderTreeNode
     } = this.props;
     const {
       transitionNodes
     } = this.state;
-    const mapData = transitionNodes.length ? transitionNodes : flattenNodes;
+    const mapData = transitionNodes.length && !searchTargetIsDeep ? transitionNodes : flattenNodes;
 
     const options = _mapInstanceProperty(mapData).call(mapData, treeNode => {
       const isMotionNode = _Array$isArray(treeNode);

package/lib/es/treeSelect/index.js

@@ -741,7 +741,8 @@ class TreeSelect extends BaseComponent {
       const {
         flattenNodes,
         motionKeys,
-        motionType
+        motionType,
+        filteredKeys
       } = this.state;
       const {
         direction
@@ -750,6 +751,7 @@ class TreeSelect extends BaseComponent {
         virtualize,
         motionExpand
       } = this.props;
+      const isExpandControlled = ('expandedKeys' in this.props);
 
       if (!virtualize || _isEmpty(virtualize)) {
         return /*#__PURE__*/React.createElement(NodeList, {
@@ -757,6 +759,8 @@ class TreeSelect extends BaseComponent {
           flattenList: this._flattenNodes,
           motionKeys: motionExpand ? motionKeys : new _Set([]),
           motionType: motionType,
+          // When motionKeys is empty, but filteredKeys is not empty (that is, the search hits), this situation should be distinguished from ordinary motionKeys
+          searchTargetIsDeep: isExpandControlled && motionExpand && _isEmpty(motionKeys) && !_isEmpty(filteredKeys),
           onMotionEnd: this.onMotionEnd,
           renderTreeNode: this.renderTreeNode
         });
@@ -1076,8 +1080,8 @@ class TreeSelect extends BaseComponent {
       notifySelect: (selectKey, bool, node) => {
         this.props.onSelect && this.props.onSelect(selectKey, bool, node);
       },
-      notifySearch: input => {
-        this.props.onSearch && this.props.onSearch(input);
+      notifySearch: (input, filteredExpandedKeys) => {
+        this.props.onSearch && this.props.onSearch(input, filteredExpandedKeys);
       },
       cacheFlattenNodes: bool => {
         this._flattenNodes = bool ? cloneDeep(this.state.flattenNodes) : null;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.6.0",
+    "version": "2.7.0-beta.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,12 +14,12 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.6.0",
-        "@douyinfe/semi-animation-react": "2.6.0",
-        "@douyinfe/semi-foundation": "2.6.0",
-        "@douyinfe/semi-icons": "2.6.0",
-        "@douyinfe/semi-illustrations": "2.6.0",
-        "@douyinfe/semi-theme-default": "2.6.0",
+        "@douyinfe/semi-animation": "2.7.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.7.0-beta.0",
+        "@douyinfe/semi-foundation": "2.7.0-beta.0",
+        "@douyinfe/semi-icons": "2.7.0-beta.0",
+        "@douyinfe/semi-illustrations": "2.7.0-beta.0",
+        "@douyinfe/semi-theme-default": "2.7.0-beta.0",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "d3a844137fb02b81a93320eb5c183636b05a4a68",
+    "gitHead": "51cc4f6fa52f3275728d2112a98446ba54619c5b",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.6.0",
+        "@douyinfe/semi-scss-compile": "2.7.0-beta.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/tree/__test__/tree.test.js

@@ -1,6 +1,7 @@
-import { Tree, Icon } from '../../index';
-import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+import { isEqual } from 'lodash';
 import { IconMapPin } from '@douyinfe/semi-icons';
+import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+import { Tree, Button } from '../../index';
 
 const treeChildren = [
     {
@@ -672,6 +673,90 @@ describe('Tree', () => {
         expect(tree.state().selectedKeys.length).toEqual(0);
     });
 
+
+    /**
+     * Detect whether the expanded item will be expanded according to the value when the value
+     *  or treeData is changed, when expandedKeys is not controlled
+     */
+     const treeJsonData1 = {
+        "Node0": {
+            "Child Node0-0": '0-0',
+            "Child Node0-1": '0-1',
+        },
+        "Node1": {
+            "Child Node1-0": '1-0',
+            "Child Node1-1": '1-1',
+        }
+    };
+    const treeJsonData2 = {
+        "Updated Node0": { 
+            "Updated Child Node0-0": {
+                'Updated Child Node0-0-0':'0-0'
+            }, 
+            "Updated Child Node0-1": '0-1', 
+        },
+        "Updated Node1": { 
+            "Updated Child Node1-0": '1-0', 
+            "Updated Child Node1-1": '1-1', 
+        }
+    };
+
+    it('expandedKeys when treeDataSimpleJson update', () => {
+        const tree = mount(
+            <Tree
+                value='0-0'
+                multiple
+                treeDataSimpleJson={treeJsonData1}
+            />,
+            {
+                attachTo: document.getElementById('container')
+            }
+        );
+        const treeDataButton = mount(
+            <Button
+                onClick={() => {
+                    if (isEqual(tree.props().treeDataSimpleJson, treeJsonData1)) {
+                        tree.setProps({ treeDataSimpleJson: treeJsonData2 });
+                        tree.update();
+                    } else {
+                        tree.setProps({ treeDataSimpleJson: treeJsonData1 });
+                        tree.update();
+                    }
+                }}
+            >
+                update treeData
+            </Button>
+        );
+        expect(
+            tree
+            .find(`.${BASE_CLASS_PREFIX}-tree-option.${BASE_CLASS_PREFIX}-tree-option-level-1`)
+            .at(0)
+            .hasClass(`${BASE_CLASS_PREFIX}-tree-option-collapsed`)
+        ).toEqual(false);
+        expect(
+            tree
+            .find(`.${BASE_CLASS_PREFIX}-tree-option.${BASE_CLASS_PREFIX}-tree-option-level-2`)
+            .at(0)
+            .hasClass(`${BASE_CLASS_PREFIX}-tree-option-collapsed`)
+        ).toEqual(true);
+        expect(
+            tree
+            .find(`.${BASE_CLASS_PREFIX}-tree-option.${BASE_CLASS_PREFIX}-tree-option-level-1`)
+            .at(1)
+            .hasClass(`${BASE_CLASS_PREFIX}-tree-option-collapsed`)
+        ).toEqual(true);
+        treeDataButton.simulate('click');
+        expect(
+            tree
+            .find(`.${BASE_CLASS_PREFIX}-tree-option.${BASE_CLASS_PREFIX}-tree-option-level-2`)
+            .at(0)
+            .hasClass(`${BASE_CLASS_PREFIX}-tree-option-collapsed`)
+        ).toEqual(false);
+        treeDataButton.simulate('click');
+        tree.unmount();
+        treeDataButton.unmount();
+    });
+
     it('expandAction = false / default behavior', () => {
         const nativeEvent = { nativeEvent: { stopImmediatePropagation: () => { } } }
         let spyOnExpand = sinon.spy(() => { });

package/tree/_story/tree.stories.js

@@ -1,12 +1,11 @@
 import React, { useRef, useState } from 'react';
+import { cloneDeep, difference, isEqual } from 'lodash';
+import { IconEdit, IconMapPin, IconMore } from '@douyinfe/semi-icons';
 import Tree from '../index';
 import AutoSizer from '../autoSizer';
-import { Button, ButtonGroup, Input, Popover, Toast } from '../../index';
+import { Button, ButtonGroup, Input, Popover, Toast, Space } from '../../index';
 import BigTree from './BigData';
 import testData from './data';
-import { cloneDeep, difference, isEqual } from 'lodash';
-import { IconEdit, IconMapPin, IconMore } from '@douyinfe/semi-icons';
-
 const TreeNode = Tree.TreeNode;
 
 export default {
@@ -2338,4 +2337,65 @@ export const CheckRelationDemo = () => {
       />
     </>
   );
-};
+};
+
+export const ValueImpactExpansionWithDynamicTreeData = () => {
+  const json = {
+      "Node0": { 
+          "Child Node0-0": '0-0', 
+          "Child Node0-1": '0-1', 
+      },
+      "Node1": { 
+          "Child Node1-0": '1-0', 
+          "Child Node1-1": '1-1', 
+      }
+  }
+  const json2 = {
+      "Updated Node0": { 
+          "Updated Child Node0-0": {
+              'Updated Child Node0-0-0':'0-0'
+          }, 
+          "Updated Child Node0-1": '0-1', 
+      },
+      "Updated Node1": { 
+          "Updated Child Node1-0": '1-0', 
+          "Updated Child Node1-1": '1-1', 
+      }
+  }
+  const style = {
+      width: 260,
+      height: 420,
+      border: '1px solid var(--color-border)'
+  }
+  const [value, setValue] = useState('0-0')
+  const [tree, setTree] = useState(json);
+  const handleValueButtonClick = () => {
+      if (value === '0-0') {
+          setValue('1-0');
+      } else {
+          setValue('0-0');
+      }
+  }
+  const handleTreeDataButtonClick = () => {
+      if(isEqual(tree, json)){
+          setTree(json2);
+      } else {
+          setTree(json);
+      }
+  }
+  return (  
+    <>
+      <div>value 受控时，当 treeData/treeDataSimpleJson 改变时，应该根据 value 自动展开</div>
+      <Tree 
+          value={value}
+          treeDataSimpleJson={tree} 
+          style={style}
+          onChange={v => setValue(v)}
+      />
+      <Space>
+          <Button onClick={handleValueButtonClick}>改变 value</Button>
+          <Button onClick={handleTreeDataButtonClick}>改变 TreeData</Button>    
+      </Space>
+    </>
+  )
+}

package/tree/index.tsx

@@ -192,6 +192,7 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
         const newState: Partial<TreeState> = {
             prevProps: props,
         };
+        const isExpandControlled = 'expandedKeys' in props;
 
         // Accept a props field as a parameter to determine whether to update the field
         const needUpdate = (name: string) => {
@@ -239,7 +240,8 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
                 newState.motionType = null;
             }
         }
-        const expandAllWhenDataChange = (needUpdate('treeDataSimpleJson') || needUpdate('treeData')) && props.expandAll;
+        const dataUpdated = needUpdate('treeDataSimpleJson') || needUpdate('treeData');
+        const expandAllWhenDataChange = dataUpdated && props.expandAll;
         if (!isSeaching) {
             // Update expandedKeys
             if (needUpdate('expandedKeys') || (prevProps && needUpdate('autoExpandParent'))) {
@@ -273,7 +275,7 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
                     props.multiple,
                     valueEntities
                 );
-            } else if (!prevProps && props.value) {
+            } else if ((!prevProps || (!isExpandControlled && dataUpdated)) && props.value) {
                 newState.expandedKeys = calcExpandedKeysForValues(
                     props.value,
                     keyEntities,

package/tree/interface.ts

@@ -131,6 +131,7 @@ export interface NodeListProps {
     motionKeys: Set<string>;
     motionType: string;
     flattenList: FlattenNode[] | undefined;
+    searchTargetIsDeep?: boolean;
     renderTreeNode: (treeNode: FlattenNode, ind?: number, style?: React.CSSProperties) => ReactNode;
 }
 export type TransitionNodes<T> = Array<T | Array<T>>;

package/tree/nodeList.tsx

@@ -59,9 +59,9 @@ export default class NodeList extends PureComponent<NodeListProps, NodeListState
     };
 
     render() {
-        const { flattenNodes, motionType, renderTreeNode } = this.props;
+        const { flattenNodes, motionType, searchTargetIsDeep, renderTreeNode } = this.props;
         const { transitionNodes } = this.state;
-        const mapData = transitionNodes.length ? transitionNodes : flattenNodes;
+        const mapData = transitionNodes.length && !searchTargetIsDeep ? transitionNodes : flattenNodes;
         const options = mapData.map(treeNode => {
             const isMotionNode = Array.isArray(treeNode);
             if (isMotionNode && !(treeNode as FlattenNode[]).length) {

package/treeSelect/__test__/treeSelect.test.js

@@ -552,6 +552,17 @@ describe('TreeSelect', () => {
         searchWrapper.find('input').simulate('change', event);
         expect(spyOnSearch.calledOnce).toBe(true);
         expect(spyOnSearch.calledWithMatch(searchValue)).toBe(true);
+
+        /* Check the input parameters of onSearch */
+        searchValue = '北京';
+        event = { target: { value: searchValue } };
+        searchWrapper.find('input').simulate('change', event);
+        expect(spyOnSearch.callCount).toBe(2);
+        const firstCall = spyOnSearch.getCall(1);
+        const args = firstCall.args;
+        expect(args[0]).toEqual('北京');
+        expect(args[1].includes('yazhou')).toEqual(true);
+        expect(args[1].includes('zhongguo')).toEqual(true);
     });
 
     it('filterTreeNode shows correct result', () => {
@@ -937,4 +948,21 @@ describe('TreeSelect', () => {
         ).toEqual(0);
     });
 
+    it('expandedKeys controlled + filterTreeNode', () => {
+        const spyOnExpand = sinon.spy(() => { });
+        const treeSelect = getTreeSelect({
+            expandedKeys: [],
+            onExpand: spyOnExpand,
+            filterTreeNode: true,
+        });
+        const searchWrapper = treeSelect.find(`.${BASE_CLASS_PREFIX}-tree-search-wrapper`);
+        const searchValue = '北京';
+        const event = { target: { value: searchValue } };
+        searchWrapper.find('input').simulate('change', event);
+        expect(spyOnExpand.callCount).toBe(0);
+        /* filter won't impact on the expansion of node when expandedKeys is controlled */
+        const topNode = treeSelect.find(`.${BASE_CLASS_PREFIX}-tree-option.${BASE_CLASS_PREFIX}-tree-option-level-1`);
+        expect(topNode.at(0).hasClass(`${BASE_CLASS_PREFIX}-tree-option-collapsed`)).toEqual(true);
+        expect(topNode.at(1).hasClass(`${BASE_CLASS_PREFIX}-tree-option-collapsed`)).toEqual(true);
+    });
 })

package/treeSelect/_story/treeSelect.stories.js

@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
-import { Icon, Button, Form, Popover, Tag } from '../../index';
+import { Icon, Button, Form, Popover, Tag, Typography } from '../../index';
 import TreeSelect from '../index';
 import { flattenDeep } from 'lodash';
 import CustomTrigger from './CustomTrigger';
 import { IconCreditCard } from '@douyinfe/semi-icons';
 const TreeNode = TreeSelect.TreeNode;
+const { Title } = Typography;
 
 export default {
   title: 'TreeSelect',
@@ -1406,4 +1407,56 @@ export const CheckRelationDemo = () => {
       />
     </>
   );
-};
+};
+
+export const SearchableAndExpandedKeys = () => {
+  const [expandedKeys1, setExpandedKeys1] = useState([]);
+  const [expandedKeys2, setExpandedKeys2] = useState([]);
+  const [expandedKeys3, setExpandedKeys3] = useState([]);
+  return (
+      <>
+          <Title heading={6}>expandedKeys 受控</Title>
+          <TreeSelect
+              style={{ width: 300, marginBottom: 30 }}
+              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+              treeData={treeData2}
+              expandedKeys={expandedKeys1}
+              defaultValue='beijing'
+              onExpand={v => {
+                  console.log('onExpand value: ', v);
+                  setExpandedKeys1(v);
+              }}
+          />
+          <Title heading={6}>expandedKeys 受控 + 开启搜索</Title>
+          <TreeSelect
+              style={{ width: 300, marginBottom: 30 }}
+              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+              treeData={treeData2}
+              filterTreeNode
+              defaultValue='beijing'
+              expandedKeys={expandedKeys2}
+              onExpand={v => {
+                  console.log('onExpand value: ', v);
+                  setExpandedKeys2(v);
+              }}
+          />
+          <Title heading={6}>expandedKeys 受控 + 开启搜索 + 搜索时更新 expandedKeys</Title>
+          <TreeSelect
+              style={{ width: 300, marginBottom: 30 }}
+              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+              treeData={treeData2}
+              filterTreeNode
+              expandedKeys={expandedKeys3}
+              defaultValue='beijing'
+              onExpand={v => {
+                  console.log('onExpand value: ', v);
+                  setExpandedKeys3(v)
+              }}
+              onSearch={(input, filterExpandedKeys) => {
+                  console.log('onExpand filterExpandedKeys: ', filterExpandedKeys);
+                  setExpandedKeys3(filterExpandedKeys);
+              }}
+          />
+      </>
+  )
+}

package/treeSelect/index.tsx

@@ -561,8 +561,8 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             notifySelect: ((selectKey, bool, node) => {
                 this.props.onSelect && this.props.onSelect(selectKey, bool, node);
             }),
-            notifySearch: input => {
-                this.props.onSearch && this.props.onSearch(input);
+            notifySearch: (input, filteredExpandedKeys) => {
+                this.props.onSearch && this.props.onSearch(input, filteredExpandedKeys);
             },
             cacheFlattenNodes: bool => {
                 this._flattenNodes = bool ? cloneDeep(this.state.flattenNodes) : null;
@@ -1232,9 +1232,10 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
     };
 
     renderNodeList = () => {
-        const { flattenNodes, motionKeys, motionType } = this.state;
+        const { flattenNodes, motionKeys, motionType, filteredKeys } = this.state;
         const { direction } = this.context;
         const { virtualize, motionExpand } = this.props;
+        const isExpandControlled = 'expandedKeys' in this.props;
         if (!virtualize || isEmpty(virtualize)) {
             return (
                 <NodeList
@@ -1242,6 +1243,13 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                     flattenList={this._flattenNodes}
                     motionKeys={motionExpand ? motionKeys : new Set([])}
                     motionType={motionType}
+                    // When motionKeys is empty, but filteredKeys is not empty (that is, the search hits), this situation should be distinguished from ordinary motionKeys
+                    searchTargetIsDeep={
+                        isExpandControlled &&
+                        motionExpand &&
+                        isEmpty(motionKeys) &&
+                        !isEmpty(filteredKeys)
+                    }
                     onMotionEnd={this.onMotionEnd}
                     renderTreeNode={this.renderTreeNode}
                 />