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

package/lib/es/select/index.js

@@ -688,7 +688,9 @@ class Select extends BaseComponent {
       });
     }
 
-    const tags = _mapInstanceProperty(selectedItems).call(selectedItems, (item, i) => {
+    const mapItems = maxTagCount ? _sliceInstanceProperty(selectedItems).call(selectedItems, 0, maxTagCount) : selectedItems; // no need to render rest tag when maxTagCount is setting
+
+    const tags = _mapInstanceProperty(mapItems).call(mapItems, (item, i) => {
       const label = item[0];
       const {
         value
@@ -747,12 +749,13 @@ class Select extends BaseComponent {
     const placeholderText = placeholder && !inputValue ? /*#__PURE__*/React.createElement("span", {
       className: spanCls
     }, placeholder) : null;
-    const n = tags.length > maxTagCount ? maxTagCount : undefined;
+    const n = selectedItems.length > maxTagCount ? maxTagCount : undefined;
     const NotOneLine = !maxTagCount; // Multiple lines (that is, do not set maxTagCount), do not use TagGroup, directly traverse with Tag, otherwise Input cannot follow the correct position
 
     const tagContent = NotOneLine ? tags : /*#__PURE__*/React.createElement(TagGroup, {
       tagList: tags,
       maxTagCount: n,
+      restCount: maxTagCount ? selectedItems.length - maxTagCount : undefined,
       size: "large",
       mode: "custom"
     });

package/lib/es/table/Body/index.d.ts

@@ -43,6 +43,8 @@ export interface BodyState {
 }
 export interface BodyContext {
     getVirtualizedListRef: GetVirtualizedListRef;
+    flattenedColumns: ColumnProps[];
+    getCellWidths: (flattenedColumns: ColumnProps[]) => number[];
 }
 declare const _default: React.ForwardRefExoticComponent<Omit<BodyProps, "forwardedRef"> & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/lib/es/table/Body/index.js

@@ -389,8 +389,13 @@ class Body extends BaseComponent {
       const {
         flattenedColumns,
         getCellWidths
-      } = _this.context;
-      const cellWidths = getCellWidths(flattenedColumns);
+      } = _this.context; // we use memoized cellWidths to avoid re-render expanded row (fix #686)
+
+      if (flattenedColumns !== _this.flattenedColumns) {
+        _this.flattenedColumns = flattenedColumns;
+        _this.cellWidths = getCellWidths(flattenedColumns);
+      }
+
       return /*#__PURE__*/React.createElement(ExpandedRow, {
         style: style,
         components: components,
@@ -402,7 +407,7 @@ class Body extends BaseComponent {
         index: index,
         virtualized: virtualized,
         key: genExpandedRowKey(key),
-        cellWidths: cellWidths
+        cellWidths: _this.cellWidths
       });
     };
     /**
@@ -580,7 +585,9 @@ class Body extends BaseComponent {
     };
     this.listRef = /*#__PURE__*/React.createRef();
     const {
-      getVirtualizedListRef
+      getVirtualizedListRef,
+      flattenedColumns,
+      getCellWidths
     } = context;
 
     if (getVirtualizedListRef) {
@@ -592,6 +599,8 @@ class Body extends BaseComponent {
     }
 
     this.foundation = new BodyFoundation(this.adapter);
+    this.flattenedColumns = flattenedColumns;
+    this.cellWidths = getCellWidths(flattenedColumns);
     this.observer = null;
   }
 

package/lib/es/tag/group.d.ts

@@ -7,6 +7,7 @@ export interface TagGroupProps {
     style?: React.CSSProperties;
     className?: string;
     maxTagCount?: number;
+    restCount?: number;
     tagList?: (TagProps | React.ReactNode)[];
     size?: 'small' | 'large';
     showPopover?: boolean;
@@ -26,6 +27,7 @@ export default class TagGroup extends PureComponent<TagGroupProps> {
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         maxTagCount: PropTypes.Requireable<number>;
+        restCount: PropTypes.Requireable<number>;
         tagList: PropTypes.Requireable<any[]>;
         size: PropTypes.Requireable<string>;
         mode: PropTypes.Requireable<string>;

package/lib/es/tag/group.js

@@ -46,9 +46,10 @@ export default class TagGroup extends PureComponent {
   renderMergeTags(tags) {
     const {
       maxTagCount,
-      tagList
+      tagList,
+      restCount
     } = this.props;
-    const n = tagList.length - maxTagCount;
+    const n = restCount ? restCount : tagList.length - maxTagCount;
     let renderTags = tags;
 
     const normalTags = _sliceInstanceProperty(tags).call(tags, 0, maxTagCount);
@@ -128,6 +129,7 @@ TagGroup.propTypes = {
   style: PropTypes.object,
   className: PropTypes.string,
   maxTagCount: PropTypes.number,
+  restCount: PropTypes.number,
   tagList: PropTypes.array,
   size: PropTypes.oneOf(tagSize),
   mode: PropTypes.string,

package/lib/es/tooltip/index.js

@@ -184,7 +184,9 @@ export default class Tooltip extends BaseComponent {
         } = _ref;
         return /*#__PURE__*/React.createElement("div", _Object$assign({
           className: classNames(className, animateCls),
-          style: _Object$assign(_Object$assign(_Object$assign({}, animateStyle), {
+          style: _Object$assign(_Object$assign(_Object$assign({
+            visibility: 'visible'
+          }, animateStyle), {
             transformOrigin
           }), style)
         }, portalEventSet, animateEvents, {
@@ -196,7 +198,9 @@ export default class Tooltip extends BaseComponent {
         className: className
       }, portalEventSet, {
         "x-placement": placement,
-        style: style
+        style: _Object$assign({
+          visibility: motion ? undefined : 'visible'
+        }, style)
       }), content, icon);
       return /*#__PURE__*/React.createElement(Portal, {
         getPopupContainer: this.props.getPopupContainer,

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

@@ -22,6 +22,7 @@ export default class NodeList extends PureComponent {
     super(props);
 
     this.onMotionEnd = () => {
+      typeof this.props.onMotionEnd === 'function' && this.props.onMotionEnd();
       this.setState({
         transitionNodes: []
       });
@@ -83,12 +84,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
         });
@@ -897,6 +901,10 @@ class TreeSelect extends BaseComponent {
     this.clickOutsideHandler = null;
     this.foundation = new TreeSelectFoundation(this.adapter);
     this.treeSelectID = _sliceInstanceProperty(_context2 = Math.random().toString(36)).call(_context2, 2);
+
+    this.onMotionEnd = () => {
+      this.adapter.rePositionDropdown();
+    };
   } // eslint-disable-next-line max-lines-per-function
 
 
@@ -1076,8 +1084,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/navigation/Item.tsx

@@ -4,12 +4,16 @@ import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import React from 'react';
 import PropTypes from 'prop-types';
 import cls from 'classnames';
-import { times, noop } from 'lodash';
+import { noop, times } from 'lodash';
 
 import isNullOrUndefined from '@douyinfe/semi-foundation/utils/isNullOrUndefined';
 import { cloneDeep, isSemiIcon } from '../_utils';
-import ItemFoundation, { ItemProps, SelectedItemProps, ItemAdapter } from '@douyinfe/semi-foundation/navigation/itemFoundation';
-import { strings, cssClasses } from '@douyinfe/semi-foundation/navigation/constants';
+import ItemFoundation, {
+    ItemAdapter,
+    ItemProps,
+    SelectedItemProps
+} from '@douyinfe/semi-foundation/navigation/itemFoundation';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/navigation/constants';
 
 import Tooltip from '../tooltip';
 import NavContext from './nav-context';
@@ -114,7 +118,7 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
         };
     }
 
-    renderIcon(icon: React.ReactNode, pos: string, isToggleIcon = false) {
+    renderIcon(icon: React.ReactNode, pos: string, isToggleIcon = false, key: number | string = 0) {
         if (this.props.isSubNav) {
             return null;
         }
@@ -134,8 +138,8 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
         });
 
         return (
-            <i className={className}>
-                {isSemiIcon(icon) ? React.cloneElement((icon as React.ReactElement), {size: (icon as React.ReactElement).props.size || iconSize}) : icon}
+            <i className={className} key={key}>
+                {isSemiIcon(icon) ? React.cloneElement((icon as React.ReactElement), { size: (icon as React.ReactElement).props.size || iconSize }) : icon}
             </i>
         );
     }
@@ -189,7 +193,6 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
         const selected = this.adapter.getSelected();
 
 
-
         let itemChildren = null;
         if (!isNullOrUndefined(children)) {
             itemChildren = children;
@@ -197,15 +200,15 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
             let placeholderIcons = null;
             if (mode === strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
                 const iconAmount = (icon && !indent) ? level : level - 1;
-                placeholderIcons = times(iconAmount, () => this.renderIcon(null, strings.ICON_POS_RIGHT, false));
+                placeholderIcons = times(iconAmount, (index) => this.renderIcon(null, strings.ICON_POS_RIGHT, false, index));
             }
             itemChildren = (
                 <>
                     {placeholderIcons}
-                    {this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true)}
-                    {icon || indent || isInSubNav ? this.renderIcon(icon, strings.ICON_POS_LEFT) : null}
+                    {this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right')}
+                    {icon || indent || isInSubNav ? this.renderIcon(icon, strings.ICON_POS_LEFT, false, 'key-position-left') : null}
                     {!isNullOrUndefined(text) ? <span className={`${cssClasses.PREFIX}-item-text`}>{text}</span> : ''}
-                    {this.context.toggleIconPosition === strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true)}
+                    {this.context.toggleIconPosition === strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right')}
                 </>
             );
         }
@@ -246,7 +249,7 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
             );
         } else {
             // Items are divided into normal and sub-wrap
-            const popoverItemCls = cls(`${className || `${clsPrefix }-normal`}`, {
+            const popoverItemCls = cls(`${className || `${clsPrefix}-normal`}`, {
                 [clsPrefix]: true,
                 [`${clsPrefix}-sub`]: isSubNav,
                 [`${clsPrefix}-selected`]: selected && !isSubNav,

package/navigation/SubNav.tsx

@@ -240,15 +240,15 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
         if (mode === strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
             /* Different icons' amount means different indents.*/
             const iconAmount = (icon && !indent) ? level : level - 1;
-            placeholderIcons = times(iconAmount, index => this.renderIcon(null, strings.ICON_POS_RIGHT, false, undefined, index));
+            placeholderIcons = times(iconAmount, index => this.renderIcon(null, strings.ICON_POS_RIGHT, false, false, index));
         }
 
         const titleDiv = (
             <div
                 role="menuitem"
                 tabIndex={-1}
-                ref={this.setTitleRef as any} 
-                className={titleCls} 
+                ref={this.setTitleRef as any}
+                className={titleCls}
                 onClick={this.handleClick}
                 onKeyPress={this.handleKeyPress}
             >
@@ -256,7 +256,7 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
                     {placeholderIcons}
                     {this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIconType, strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-left')}
                     {icon || indent || (isInSubNav && mode !== strings.MODE_HORIZONTAL)
-                        ? this.renderIcon(icon, strings.ICON_POS_LEFT, undefined, undefined, 'key-inSubNav-position-left')
+                        ? this.renderIcon(icon, strings.ICON_POS_LEFT, false, false, 'key-inSubNav-position-left')
                         : null}
                     <span className={`${prefixCls}-item-text`}>{text}</span>
                     {this.context.toggleIconPosition === strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIconType, strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-right')}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.6.0-beta.0",
+    "version": "2.7.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-beta.0",
-        "@douyinfe/semi-animation-react": "2.6.0-beta.0",
-        "@douyinfe/semi-foundation": "2.6.0-beta.0",
-        "@douyinfe/semi-icons": "2.6.0-beta.0",
-        "@douyinfe/semi-illustrations": "2.6.0-beta.0",
-        "@douyinfe/semi-theme-default": "2.6.0-beta.0",
+        "@douyinfe/semi-animation": "2.7.0",
+        "@douyinfe/semi-animation-react": "2.7.0",
+        "@douyinfe/semi-foundation": "2.7.0",
+        "@douyinfe/semi-icons": "2.7.0",
+        "@douyinfe/semi-illustrations": "2.7.0",
+        "@douyinfe/semi-theme-default": "2.7.0",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "49d107f759f3610a471c34bb9568ad9408aa2cb0",
+    "gitHead": "b6e4e0a1e22d4dabe68cbf7e3d2cfd0202da0424",
     "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-beta.0",
+        "@douyinfe/semi-scss-compile": "2.7.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/radio/__test__/radioGroup.test.jsx

@@ -196,4 +196,12 @@ describe('RadioGroup', () => {
         expect(middleRadio.exists(`.${BASE_CLASS_PREFIX}-radio-addon-buttonRadio-middle`)).toEqual(true);
         expect(largeRadio.exists(`.${BASE_CLASS_PREFIX}-radio-addon-buttonRadio-large`)).toEqual(true);
     });
-});
+
+    it('does not trigger Maximum update exceeded when setting radio-group\'s value to NaN', () => {
+        const radioGroup = mount(
+            createRadioGroup({ value: NaN }),
+        );
+
+        expect(radioGroup.exists(`${BASE_CLASS_PREFIX}-radio-checked`)).toEqual(false);
+    });
+});

package/radio/_story/radio.stories.js

@@ -865,4 +865,25 @@ export const FixWithFieldLossRef = () => {
     </Form>
   );
 }
-FixWithFieldLossRef.storyName = '修复 Form Field 丢失 ref 问题 #384';
+FixWithFieldLossRef.storyName = '修复 Form Field 丢失 ref 问题 #384';
+
+
+export const SwitchValueToNaN = () => {
+  const [val, setVal] = useState(1);
+
+  return (
+    <>
+      <RadioGroup direction="vertical" aria-label="单选组合示例" value={val}>
+          <Radio value={1}>A</Radio>
+          <Radio value={2}>B</Radio>
+          <Radio value={3}>C</Radio>
+          <Radio value={4}>D</Radio>
+      </RadioGroup>
+      <Space>
+        <Button onClick={() => setVal(NaN)}>NaN</Button>
+        <Button onClick={() => setVal(2)}>2</Button>
+      </Space>
+    </>
+  );
+}
+SwitchValueToNaN.storyName = 'SwitchValueToNaN';

package/radio/radioGroup.tsx

@@ -97,6 +97,15 @@ class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState> {
     }
 
     componentDidUpdate(prevProps: RadioGroupProps) {
+        if (typeof prevProps.value === 'number'
+            && isNaN(prevProps.value)
+            && typeof this.props.value === 'number'
+            && isNaN(this.props.value)
+        ) {
+            // `NaN === NaN` returns false, and this will fail the next if check
+            // therefore triggering an infinite loop
+            return;
+        }
         if (prevProps.value !== this.props.value) {
             this.foundation.handlePropValueChange(this.props.value);
         }

package/select/_story/select.stories.js

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 
 import './select.scss';
-import { Input, Select, Button, Icon, Avatar, Checkbox, Form, withField, Space } from '../../index';
+import { Input, Select, Button, Icon, Avatar, Checkbox, Form, withField, Space, Tag } from '../../index';
 import CustomTrigger from './CustomTrigger';
 import classNames from 'classnames';
 import { getHighLightTextHTML } from '../../_utils/index';
@@ -2903,4 +2903,75 @@ export const AutoClearSearchValue = () => {
 
 SelectInputPropsDemo.story = {
   name: 'AutoClearSearchValue',
-};
+};
+
+
+export const RenderSelectedItemCallCount = () => {
+      const list = [
+        { "name": "夏可漫", "email": "xiakeman@example.com", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg" },
+        { "name": "申悦", "email": "shenyue@example.com", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg" },
+        { "name": "曲晨一", "email": "quchenyi@example.com", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/8bd8224511db085ed74fea37205aede5.jpg" },
+        { "name": "文嘉茂", "email": "wenjiamao@example.com", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/6fbafc2d-e3e6-4cff-a1e2-17709c680624.png" },
+        { "name": "文嘉茂2", "email": "wenjiamao@example.com", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/6fbafc2d-e3e6-4cff-a1e2-17709c680624.png" },
+        { "name": "文嘉茂3", "email": "wenjiamao@example.com", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/6fbafc2d-e3e6-4cff-a1e2-17709c680624.png" },
+    ]
+
+    const renderMultipleWithCustomTag = (optionNode, { onClose }) => {
+        console.count('rerender')
+        const content = (
+            <Tag
+                avatarSrc={optionNode.avatar}
+                avatarShape='circle'
+                closable={true}
+                onClose={onClose}
+                size='large'
+            >
+                {optionNode.name}
+            </Tag>
+        );
+        return {
+            isRenderInTag: false,
+            content
+        };
+    }
+
+    const renderCustomOption = (item, index) => {
+        const optionStyle = {
+            display: 'flex',
+            paddingLeft: 24,
+            paddingTop: 10,
+            paddingBottom: 10
+        }
+        return (
+            <Select.Option key={index} value={item.name} style={optionStyle} showTick={true}  {...item} key={item.email}>
+                <Avatar size="small" src={item.avatar} />
+                <div style={{ marginLeft: 8 }}>
+                    <div style={{ fontSize: 14 }}>{item.name}</div>
+                    <div style={{ color: 'var(--color-text-2)', fontSize: 12, lineHeight: '16px', fontWeight: 'normal' }}>{item.email}</div>
+                </div>
+            </Select.Option>
+        )
+    }
+
+    return (
+        <>
+            <Select
+                placeholder='请选择'
+                showClear
+                multiple
+                maxTagCount={2}
+                style={{ width: 280, height: 40 }}
+                onChange={v => console.log(v)}
+                defaultValue={'夏可漫'}
+                renderSelectedItem={renderMultipleWithCustomTag}
+            >
+                {list.map((item, index) => renderCustomOption(item, index))}
+            </Select>
+        </>
+    );
+}
+
+
+RenderSelectedItemCallCount.story = {
+  name: 'RenderSelectedItemCallCount',
+};

package/select/index.tsx

@@ -898,8 +898,10 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                 content: optionNode.label,
             });
         }
+        
+        const mapItems = maxTagCount ? selectedItems.slice(0, maxTagCount) : selectedItems; // no need to render rest tag when maxTagCount is setting
 
-        const tags = selectedItems.map((item, i) => {
+        const tags = mapItems.map((item, i) => {
             const label = item[0];
             const { value } = item[1];
             const disabled = item[1].disabled || selectDisabled;
@@ -939,11 +941,11 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             // [prefixcls + '-selection-text-inactive']: !inputValue && !tags.length,
         });
         const placeholderText = placeholder && !inputValue ? <span className={spanCls}>{placeholder}</span> : null;
-        const n = tags.length > maxTagCount ? maxTagCount : undefined;
+        const n = selectedItems.length > maxTagCount ? maxTagCount : undefined;
 
         const NotOneLine = !maxTagCount; // Multiple lines (that is, do not set maxTagCount), do not use TagGroup, directly traverse with Tag, otherwise Input cannot follow the correct position
 
-        const tagContent = NotOneLine ? tags : <TagGroup tagList={tags} maxTagCount={n} size="large" mode="custom" />;
+        const tagContent = NotOneLine ? tags : <TagGroup tagList={tags} maxTagCount={n} restCount={maxTagCount ? selectedItems.length - maxTagCount : undefined} size="large" mode="custom" />;
 
         return (
             <>

package/table/Body/index.tsx

@@ -89,6 +89,8 @@ export interface BodyState {
 
 export interface BodyContext {
     getVirtualizedListRef: GetVirtualizedListRef;
+    flattenedColumns: ColumnProps[];
+    getCellWidths: (flattenedColumns: ColumnProps[]) => number[];
 }
 
 class Body extends BaseComponent<BodyProps, BodyState> {
@@ -128,6 +130,8 @@ class Body extends BaseComponent<BodyProps, BodyState> {
     listRef: React.MutableRefObject<any>;
     observer: ResizeObserver;
     foundation: BodyFoundation;
+    cellWidths: number[];
+    flattenedColumns: ColumnProps[];
     constructor(props: BodyProps, context: BodyContext) {
         super(props);
         this.ref = React.createRef();
@@ -142,7 +146,7 @@ class Body extends BaseComponent<BodyProps, BodyState> {
         };
 
         this.listRef = React.createRef();
-        const { getVirtualizedListRef } = context;
+        const { getVirtualizedListRef, flattenedColumns, getCellWidths } = context;
         if (getVirtualizedListRef) {
             if (props.virtualized) {
                 getVirtualizedListRef(this.listRef);
@@ -152,6 +156,8 @@ class Body extends BaseComponent<BodyProps, BodyState> {
             }
         }
         this.foundation = new BodyFoundation(this.adapter);
+        this.flattenedColumns = flattenedColumns;
+        this.cellWidths = getCellWidths(flattenedColumns);
         this.observer = null;
     }
 
@@ -199,7 +205,7 @@ class Body extends BaseComponent<BodyProps, BodyState> {
                     this.observer.unobserve(bodyWrapDOM);
                     this.observer = null;
                 }
-            }
+            },
         };
     }
 
@@ -494,7 +500,12 @@ class Body extends BaseComponent<BodyProps, BodyState> {
         }
 
         const { flattenedColumns, getCellWidths } = this.context;
-        const cellWidths = getCellWidths(flattenedColumns);
+
+        // we use memoized cellWidths to avoid re-render expanded row (fix #686)
+        if (flattenedColumns !== this.flattenedColumns) {
+            this.flattenedColumns = flattenedColumns;
+            this.cellWidths = getCellWidths(flattenedColumns);
+        }
 
         return (
             <ExpandedRow
@@ -508,7 +519,7 @@ class Body extends BaseComponent<BodyProps, BodyState> {
                 index={index}
                 virtualized={virtualized}
                 key={genExpandedRowKey(key)}
-                cellWidths={cellWidths}
+                cellWidths={this.cellWidths}
             />
         );
     };