@douyinfe/semi-ui 2.2.2 → 2.3.0-beta.0

package/tooltip/index.tsx

@@ -12,6 +12,7 @@ import { ArrayElement } from '@douyinfe/semi-foundation/utils/type';
 import { convertDOMRectToObject, DOMRectLikeType } from '@douyinfe/semi-foundation/utils/dom';
 import TooltipFoundation, { TooltipAdapter, Position, PopupContainerDOMRect } from '@douyinfe/semi-foundation/tooltip/foundation';
 import { strings, cssClasses, numbers } from '@douyinfe/semi-foundation/tooltip/constants';
+import { getUuidv4 } from '@douyinfe/semi-foundation/utils/uuid';
 import '@douyinfe/semi-foundation/tooltip/tooltip.scss';
 
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
@@ -56,6 +57,7 @@ export interface TooltipProps extends BaseProps {
     showArrow?: boolean | React.ReactNode;
     zIndex?: number;
     rePosKey?: string | number;
+    role?: string;
     arrowBounding?: ArrowBounding;
     transformFromCenter?: boolean;
     arrowPointAtCenter?: boolean;
@@ -77,6 +79,8 @@ interface TooltipState {
     isInsert: boolean;
     placement: Position;
     transitionStyle: Record<string, any>;
+    isPositionUpdated: boolean;
+    id: string;
 }
 
 const prefix = cssClasses.PREFIX;
@@ -117,26 +121,28 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         arrowPointAtCenter: PropTypes.bool,
         stopPropagation: PropTypes.bool,
         // private
+        role: PropTypes.string,
         wrapWhenSpecial: PropTypes.bool, // when trigger has special status such as "disabled" or "loading", wrap span
     };
 
     static defaultProps = {
-        transformFromCenter: true,
+        arrowBounding: numbers.ARROW_BOUNDING,
+        autoAdjustOverflow: true,
         arrowPointAtCenter: true,
-        wrapWhenSpecial: true,
-        motion: true,
-        zIndex: numbers.DEFAULT_Z_INDEX,
         trigger: 'hover',
+        transformFromCenter: true,
         position: 'top',
         prefixCls: prefix,
-        autoAdjustOverflow: true,
+        role: 'tooltip',
         mouseEnterDelay: numbers.MOUSE_ENTER_DELAY,
         mouseLeaveDelay: numbers.MOUSE_LEAVE_DELAY,
+        motion: true,
         onVisibleChange: noop,
         onClickOutSide: noop,
         spacing: numbers.SPACING,
         showArrow: true,
-        arrowBounding: numbers.ARROW_BOUNDING,
+        wrapWhenSpecial: true,
+        zIndex: numbers.DEFAULT_Z_INDEX,
     };
 
     eventManager: Event;
@@ -167,6 +173,8 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
             isInsert: false,
             placement: props.position || 'top',
             transitionStyle: {},
+            isPositionUpdated: false,
+            id: getUuidv4(), // auto generate id, will be used by children.aria-descriptionby & content.id, improve a11y
         };
         this.foundation = new TooltipFoundation(this.adapter);
         this.eventManager = new Event();
@@ -197,18 +205,15 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                         containerStyle: { ...this.state.containerStyle, ...containerStyle },
                     },
                     () => {
-                        /**
-                         * Dangerous: remove setTimeout from here fix #1301
-                         * setTimeout may emit portalInserted event after hiding portal
-                         * Hiding portal will remove portalInserted event listener(normal process)
-                         * then portal can't hide because _togglePortalVisible(false) will found isVisible=false and nowVisible=false(bug here)
-                         */
-                        this.eventManager.emit('portalInserted');
+                        setTimeout(() => {
+                            // waiting child component mounted
+                            this.eventManager.emit('portalInserted');
+                        }, 0);
                     }
                 );
             },
             removePortal: () => {
-                this.setState({ isInsert: false });
+                this.setState({ isInsert: false, isPositionUpdated: false });
             },
             getEventName: () => ({
                 mouseEnter: 'onMouseEnter',
@@ -275,7 +280,11 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
             getDocumentElementBounding: () => document.documentElement.getBoundingClientRect(),
             setPosition: ({ position, ...style }: { position: Position }) => {
                 this.setState(
-                    { containerStyle: { ...this.state.containerStyle, ...style }, placement: position },
+                    { 
+                        containerStyle: { ...this.state.containerStyle, ...style },
+                        placement: position,
+                        isPositionUpdated: true
+                    },
                     () => {
                         this.eventManager.emit('positionUpdated');
                     }
@@ -422,16 +431,10 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         return false;
     };
 
-    willEnter = () => {
-        this.foundation.calcPosition();
-        /**
-         * Dangerous: remove setState in motion fix #1379
-         * because togglePortalVisible callback function will use visible state to notifyVisibleChange
-         * if visible state is old value, then notifyVisibleChange function will not be called
-         * we should ensure that after calling togglePortalVisible, callback function can get right visible value
-         */
-        // this.setState({ visible: true });
-    };
+    // willEnter = () => {
+    // this.foundation.calcPosition();
+    // this.setState({ visible: true });
+    // };
 
     didLeave = () => {
         this.adapter.unregisterClickOutsideHandler();
@@ -489,8 +492,8 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     };
 
     renderPortal = () => {
-        const { containerStyle = {}, visible, portalEventSet, placement, transitionState } = this.state;
-        const { prefixCls, content, showArrow, style, motion, zIndex } = this.props;
+        const { containerStyle = {}, visible, portalEventSet, placement, transitionState, id, isPositionUpdated } = this.state;
+        const { prefixCls, content, showArrow, style, motion, role, zIndex } = this.props;
         const { className: propClassName } = this.props;
         const direction = this.context.direction;
         const className = classNames(propClassName, {
@@ -502,22 +505,24 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         const icon = this.renderIcon();
         const portalInnerStyle = omit(containerStyle, motion ? ['transformOrigin'] : undefined);
         const transformOrigin = get(containerStyle, 'transformOrigin');
-        const inner = motion ? (
-            <TooltipTransition position={placement} willEnter={this.willEnter} didLeave={this.didLeave} motion={motion}>
+        const inner = motion && isPositionUpdated ? (
+            <TooltipTransition position={placement} didLeave={this.didLeave} motion={motion}>
                 {
                     transitionState === 'enter' ?
                         ({ animateCls, animateStyle, animateEvents }) => (
                             <div
                                 className={classNames(className, animateCls)}
                                 style={{
-                                    visibility: 'visible',
+                                    // visibility: 'visible',
                                     ...animateStyle,
                                     transformOrigin,
                                     ...style,
                                 }}
                                 {...portalEventSet}
                                 {...animateEvents}
+                                role={role}
                                 x-placement={placement}
+                                id={id}
                             >
                                 {content}
                                 {icon}
@@ -580,8 +585,8 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     };
 
     render() {
-        const { isInsert, triggerEventSet } = this.state;
-        const { wrapWhenSpecial } = this.props;
+        const { isInsert, triggerEventSet, visible, id } = this.state;
+        const { wrapWhenSpecial, role } = this.props;
         let { children } = this.props;
         const childrenStyle = { ...get(children, 'props.style') };
         const extraStyle: React.CSSProperties = {};
@@ -605,8 +610,21 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
             }
         }
 
+        // eslint-disable-next-line prefer-const
+        let ariaAttribute = {};
+
+        // Take effect when used by Popover component
+        if (role === 'dialog') {
+            ariaAttribute['aria-expanded'] = visible ? 'true' : 'false';
+            ariaAttribute['aria-haspopup'] = 'dialog';
+            ariaAttribute['aria-controls'] = id;
+        } else {
+            ariaAttribute['aria-describedby'] = id;
+        }
+
         // The incoming children is a single valid element, otherwise wrap a layer with span
         const newChild = React.cloneElement(children as React.ReactElement, {
+            ...ariaAttribute,
             ...(children as React.ReactElement).props,
             ...this.mergeEvents((children as React.ReactElement).props, triggerEventSet),
             style: {
@@ -615,7 +633,6 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
             },
             className: classNames(
                 get(children, 'props.className')
-                // `${prefixCls}-trigger`
             ),
             // to maintain refs with callback
             ref: (node: React.ReactNode) => {

package/transfer/index.tsx

@@ -291,7 +291,7 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
             return null;
         }
         return (
-            <div className={`${prefixcls }-filter`}>
+            <div role="search" aria-label="Transfer filter" className={`${prefixcls}-filter`}>
                 <Input
                     prefix={<IconSearch />}
                     placeholder={locale.placeholder}
@@ -309,20 +309,20 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
         const { disabled } = this.props;
         const { totalContent, allContent, onAllClick, type, showButton } = headerConfig;
         const headerCls = cls({
-            [`${prefixcls }-header`]: true,
-            [`${prefixcls }-right-header`]: type === 'right',
-            [`${prefixcls }-left-header`]: type === 'left',
+            [`${prefixcls}-header`]: true,
+            [`${prefixcls}-right-header`]: type === 'right',
+            [`${prefixcls}-left-header`]: type === 'left',
         });
         return (
             <div className={headerCls}>
-                <span className={`${prefixcls }-header-total`}>{totalContent}</span>
+                <span className={`${prefixcls}-header-total`}>{totalContent}</span>
                 {showButton ? (
                     <Button
                         theme="borderless"
                         disabled={disabled}
                         type="tertiary"
                         size="small"
-                        className={`${prefixcls }-header-all`}
+                        className={`${prefixcls}-header-all`}
                         onClick={onAllClick}
                     >
                         {allContent}
@@ -340,8 +340,8 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
             return renderSourceItem({ ...item, checked, onChange: () => this.onSelectOrRemove(item) });
         }
         const leftItemCls = cls({
-            [`${prefixcls }-item`]: true,
-            [`${prefixcls }-item-disabled`]: item.disabled,
+            [`${prefixcls}-item`]: true,
+            [`${prefixcls}-item-disabled`]: item.disabled,
         });
         return (
             <Checkbox
@@ -349,6 +349,7 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
                 disabled={item.disabled || disabled}
                 className={leftItemCls}
                 checked={checked}
+                role="listitem"
                 onChange={() => this.onSelectOrRemove(item)}
             >
                 {item.label}
@@ -438,7 +439,7 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
         }
 
         return (
-            <section className={`${prefixcls }-left`}>
+            <section className={`${prefixcls}-left`}>
                 {inputCom}
                 {content}
             </section>
@@ -501,7 +502,7 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
                 content.push(optionContent);
             }
         });
-        return <div className={`${prefixcls }-left-list`}>{content}</div>;
+        return <div className={`${prefixcls}-left-list`} role="list" aria-label="Option list">{content}</div>;
     }
 
     renderRightItem(item: ResolvedDataItem): React.ReactNode {
@@ -513,9 +514,9 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
         }
         const onRemove = () => this.foundation.handleSelectOrRemove(newItem);
         const rightItemCls = cls({
-            [`${prefixcls }-item`]: true,
-            [`${prefixcls }-right-item`]: true,
-            [`${prefixcls }-right-item-draggable`]: draggable
+            [`${prefixcls}-item`]: true,
+            [`${prefixcls}-right-item`]: true,
+            [`${prefixcls}-right-item-draggable`]: draggable
         });
         const shouldShowPath = type === strings.TYPE_TREE_TO_LIST && showPath === true;
 
@@ -526,15 +527,18 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
         }
 
         const DragHandle = SortableHandle(() => (
-            <IconHandle className={`${prefixcls }-right-item-drag-handler`} />
+            <IconHandle role="button" aria-label="Drag and sort" className={`${prefixcls}-right-item-drag-handler`} />
         ));
 
         return (
-            <div className={rightItemCls} key={newItem.key}>
+            // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+            <div role="listitem" className={rightItemCls} key={newItem.key}>
                 {draggable ? <DragHandle /> : null}
                 <div className={`${prefixcls}-right-item-text`}>{label}</div>
                 <IconClose
-                    onClick={onRemove} className={cls(`${prefixcls}-item-close-icon`, {
+                    onClick={onRemove}
+                    aria-disabled={item.disabled}
+                    className={cls(`${prefixcls}-item-close-icon`, {
                         [`${prefixcls}-item-close-icon-disabled`]: item.disabled
                     })}
                 />
@@ -544,11 +548,11 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
 
     renderEmpty(type: string, emptyText: React.ReactNode) {
         const emptyCls = cls({
-            [`${prefixcls }-empty`]: true,
-            [`${prefixcls }-right-empty`]: type === 'right',
-            [`${prefixcls }-left-empty`]: type === 'left',
+            [`${prefixcls}-empty`]: true,
+            [`${prefixcls}-right-empty`]: type === 'right',
+            [`${prefixcls}-left-empty`]: type === 'left',
         });
-        return <div className={emptyCls}>{emptyText}</div>;
+        return <div aria-label="empty" className={emptyCls}>{emptyText}</div>;
     }
 
     renderRightSortableList(selectedData: Array<ResolvedDataItem>) {
@@ -557,7 +561,7 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
             (item: ResolvedDataItem) => this.renderRightItem(item)) as React.SFC<ResolvedDataItem>
         );
         const SortableList = SortableContainer(({ items }: { items: Array<ResolvedDataItem> }) => (
-            <div className={`${prefixcls}-right-list`}>
+            <div className={`${prefixcls}-right-list`} role="list" aria-label="Selected list">
                 {items.map((item, index: number) => (
                     // sortableElement will take over the property 'key', so use another '_optionKey' to pass
                     <SortableItem key={item.label} index={index} {...item} _optionKey={item.key} />
@@ -597,7 +601,7 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
         };
         const headerCom = this.renderHeader(headerConfig);
         const emptyCom = this.renderEmpty('right', emptyContent.right ? emptyContent.right : locale.emptyRight);
-        const panelCls = `${prefixcls }-right`;
+        const panelCls = `${prefixcls}-right`;
 
         let content = null;
 
@@ -608,7 +612,7 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
                 break;
             case selectedData.length && !draggable:
                 const list = (
-                    <div className={`${prefixcls }-right-list`}>
+                    <div className={`${prefixcls}-right-list`} role="list" aria-label="Selected list">
                         {selectedData.map(item => this.renderRightItem({ ...item }))}
                     </div>
                 );
@@ -632,8 +636,8 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
     render() {
         const { className, style, disabled, renderSelectedPanel, renderSourcePanel } = this.props;
         const transferCls = cls(prefixcls, className, {
-            [`${prefixcls }-disabled`]: disabled,
-            [`${prefixcls }-custom-panel`]: renderSelectedPanel && renderSourcePanel,
+            [`${prefixcls}-disabled`]: disabled,
+            [`${prefixcls}-custom-panel`]: renderSelectedPanel && renderSourcePanel,
         });
 
         return (

package/tree/_story/tree.stories.js

@@ -1279,7 +1279,7 @@ const RefSearch = () => {
   ];
   return (
     <div>
-      <Input onChange={v => ref.current.search(v)} />
+      <Input aria-label='filter tree' onChange={v => ref.current.search(v)} />
       <Tree
         treeData={treeData}
         defaultValue="Shanghai"
@@ -1814,7 +1814,7 @@ const MutipleHLTree = () => {
         : 'transparent',
     };
     return (
-      <li className={className} role="treenode" onClick={onClick} style={style}>
+      <li className={className} role="treeitem" onClick={onClick} style={style}>
         {isLeaf ? null : expandIcon}
         {icon ? icon : null}
         <span>{label}</span>
@@ -2141,7 +2141,7 @@ export const RenderFullLabelWithDraggable = () => {
         : 'transparent',
     };
     return (
-      <li className={className} role="treenode" onClick={onClick} style={style}>
+      <li className={className} role="treeitem" onClick={onClick} style={style}>
         {isLeaf ? <span style={{ width: 24 }}></span> : expandIcon}
         {icon ? icon : null}
         <span>{label}</span>

package/tree/index.tsx

@@ -112,6 +112,7 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
         onDragStart: PropTypes.func,
         onDrop: PropTypes.func,
         labelEllipsis: PropTypes.bool,
+        'aria-label': PropTypes.string,
     };
 
     static defaultProps = {
@@ -511,6 +512,7 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
                         }
                         return (
                             <Input
+                                aria-label='Filter Tree'
                                 ref={this.inputRef as any}
                                 {...inputProps}
                             />
@@ -701,6 +703,12 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
         });
         const searchNoRes = Boolean(inputValue) && !filteredKeys.size;
         const noData = isEmpty(keyEntities) || (showFilteredOnly && searchNoRes);
+        const ariaAttr = {
+            role: noData ? 'none' : 'tree'
+        };
+        if (ariaAttr.role === 'tree'){
+            ariaAttr['aria-multiselectable'] = multiple ? true : false;
+        }
         return (
             <TreeContext.Provider
                 value={{
@@ -739,9 +747,9 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
                     labelEllipsis: typeof labelEllipsis === 'undefined' ? virtualize : labelEllipsis,
                 }}
             >
-                <div className={wrapperCls} role="list-box" style={style}>
+                <div aria-label={this.props['aria-label']} className={wrapperCls} style={style}>
                     {filterTreeNode ? this.renderInput() : null}
-                    <div className={listCls} role="tree">
+                    <div className={listCls} {...ariaAttr}>
                         {noData ? this.renderEmpty() : this.renderNodeList()}
                     </div>
                 </div>

package/tree/treeNode.tsx

@@ -2,7 +2,8 @@ import React, { PureComponent } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses } from '@douyinfe/semi-foundation/tree/constants';
-import { debounce, isFunction, isString } from 'lodash';
+import isEnterPress from '@douyinfe/semi-foundation/utils/isEnterPress';
+import { debounce, isFunction, isString, get } from 'lodash';
 import { IconTreeTriangleDown, IconFile, IconFolder, IconFolderOpen } from '@douyinfe/semi-icons';
 import { Checkbox } from '../checkbox';
 import TreeContext from './treeContext';
@@ -51,19 +52,19 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
         });
     }
 
-    onSelect = (e: React.MouseEvent) => {
+    onSelect = (e: React.MouseEvent | React.KeyboardEvent) => {
         const { onNodeSelect } = this.context;
         onNodeSelect(e, this.props);
     };
 
-    onExpand = (e: React.MouseEvent) => {
+    onExpand = (e: React.MouseEvent | React.KeyboardEvent) => {
         const { onNodeExpand } = this.context;
         e && e.stopPropagation();
         e.nativeEvent.stopImmediatePropagation();
         onNodeExpand(e, this.props);
     };
 
-    onCheck = (e: React.MouseEvent) => {
+    onCheck = (e: React.MouseEvent | React.KeyboardEvent) => {
         if (this.isDisabled()) {
             return;
         }
@@ -73,12 +74,21 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
         onNodeCheck(e, this.props);
     };
 
+    /**
+     * A11y: simulate checkbox click
+     */
+    handleCheckEnterPress = (e: React.KeyboardEvent) => {
+        if (isEnterPress(e)) {
+            this.onCheck(e);
+        }
+    }
+
     onContextMenu = (e: React.MouseEvent) => {
         const { onNodeRightClick } = this.context;
         onNodeRightClick(e, this.props);
     };
 
-    onClick = (e: React.MouseEvent) => {
+    onClick = (e: React.MouseEvent | React.KeyboardEvent) => {
         const { expandAction } = this.context;
         if (expandAction === 'doubleClick') {
             this.debounceSelect(e);
@@ -90,6 +100,15 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
         }
     };
 
+    /**
+     * A11y: simulate li click
+     */
+    handleliEnterPress = (e: React.KeyboardEvent) => {
+        if (isEnterPress(e)) {
+            this.onClick(e);
+        }
+    }
+
     onDoubleClick = (e: React.MouseEvent) => {
         const { expandAction, onNodeDoubleClick } = this.context;
         e.stopPropagation();
@@ -179,13 +198,15 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
 
     renderArrow() {
         const showIcon = !this.isLeaf();
-        const { loading } = this.props;
+        const { loading, expanded } = this.props;
         if (loading) {
             return <Spin wrapperClassName={`${prefixcls}-spin-icon`} />;
         }
         if (showIcon) {
             return (
                 <IconTreeTriangleDown
+                    role='button'
+                    aria-label={`${expanded ? 'Expand' : 'Collapse'} the tree item`} 
                     className={`${prefixcls}-expand-icon`}
                     size="small"
                     onClick={this.onExpand}
@@ -201,8 +222,13 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
         const { checked, halfChecked } = this.props;
         const disabled = this.isDisabled();
         return (
-            <div onClick={this.onCheck}>
+            <div
+                role='none'
+                onClick={this.onCheck} 
+                onKeyPress={this.handleCheckEnterPress}
+            >
                 <Checkbox
+                    aria-label='Toggle the checked state of checkbox'
                     indeterminate={halfChecked}
                     checked={checked}
                     disabled={Boolean(disabled)}
@@ -242,9 +268,9 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
         });
         return (
             <ul className={wrapperCls}>
-                <span className={`${prefixcls}-label ${prefixcls}-label-empty`}>
+                <li className={`${prefixcls}-label ${prefixcls}-label-empty`}>
                     {emptyContent}
-                </span>
+                </li>
             </ul>
         );
     }
@@ -373,12 +399,22 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
             [`${prefixcls}-drag-over-gap-top`]: !disabled && dragOverGapTop,
             [`${prefixcls}-drag-over-gap-bottom`]: !disabled && dragOverGapBottom,
         });
+        const setsize = get(rest, ['data', 'children', 'length']);
+        const posinset = isString(rest.pos) ? Number(rest.pos.split('-')[level+1]) + 1 : 1;
         return (
             <li
                 className={nodeCls}
-                role="treenode"
+                role="treeitem"
+                aria-disabled={disabled} 
+                aria-checked={checked}
+                aria-selected={selected}
+                aria-setsize={setsize}
+                aria-posinset={posinset}
+                aria-expanded={expanded}
+                aria-level={level+1}
                 data-key={eventKey}
                 onClick={this.onClick}
+                onKeyPress={this.handleliEnterPress}
                 onContextMenu={this.onContextMenu}
                 onDoubleClick={this.onDoubleClick}
                 ref={this.setRef}

package/treeSelect/__test__/treeMultiple.test.js

@@ -632,7 +632,12 @@ describe('TreeSelect', () => {
             searchPosition: 'trigger',
             filterTreeNode: true,
             multiple: true,
+            maxTagCount: 1,
+            defaultValue: ['Zhongguo', 'Meiguo']
         });
+        const selection = treeSelect.find(`.${BASE_CLASS_PREFIX}-tree-select .${BASE_CLASS_PREFIX}-tree-select-selection`);
+        expect(selection.find(`.${BASE_CLASS_PREFIX}-tagInput .${BASE_CLASS_PREFIX}-tag`).length).toEqual(1);
+        expect(selection.find(`.${BASE_CLASS_PREFIX}-tagInput .${BASE_CLASS_PREFIX}-tagInput-wrapper-n`).at(0).getDOMNode().textContent).toEqual('+1');
         const input = treeSelect.find(`.${BASE_CLASS_PREFIX}-tree-select .${BASE_CLASS_PREFIX}-tagInput .${BASE_CLASS_PREFIX}-input`);
         const searchValue = '北';
         const event = { target: { value: searchValue } };

package/treeSelect/_story/treeSelect.stories.js

@@ -299,6 +299,18 @@ export const SearchPosition = () => (
       placeholder="searchAutoFocus"
       searchAutoFocus
     />
+    <br />
+    <br />
+    <TreeSelect
+      searchPosition="trigger"
+      style={{ width: 300 }}
+      dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+      treeData={treeData2}
+      multiple
+      filterTreeNode
+      maxTagCount={1}
+      placeholder="maxTagCount=1"
+    />
   </>
 );