@douyinfe/semi-ui 2.16.1 → 2.17.0-beta.0

package/select/index.tsx

@@ -24,7 +24,7 @@ import OptionGroup from './optionGroup';
 import Spin from '../spin';
 import Trigger from '../trigger';
 import { IconChevronDown, IconClear } from '@douyinfe/semi-icons';
-import { isSemiIcon } from '../_utils';
+import { isSemiIcon, getFocusableElements, getActiveElement } from '../_utils';
 import { Subtract } from 'utility-types';
 
 import warning from '@douyinfe/semi-foundation/utils/warning';
@@ -177,6 +177,7 @@ export interface SelectState {
     keyboardEventSet: any; // {}
     optionGroups: Array<any>;
     isHovering: boolean;
+    isFocusInContainer: boolean;
 }
 
 // Notes: Use the label of the option as the identifier, that is, the option in Select, the value is allowed to be the same, but the label must be unique
@@ -304,13 +305,13 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         onListScroll: noop,
         maxHeight: 300,
         dropdownMatchSelectWidth: true,
-        defaultActiveFirstOption: false,
+        defaultActiveFirstOption: true, // In order to meet the needs of A11y, change to true
         showArrow: true,
         showClear: false,
         remote: false,
         autoAdjustOverflow: true,
         autoClearSearchValue: true,
-        arrowIcon: <IconChevronDown />
+        arrowIcon: <IconChevronDown aria-label='' />
         // Radio selection is different from the default renderSelectedItem for multiple selection, so it is not declared here
         // renderSelectedItem: (optionNode) => optionNode.label,
         // The default creator rendering is related to i18, so it is not declared here
@@ -319,9 +320,11 @@ class Select extends BaseComponent<SelectProps, SelectState> {
 
     inputRef: React.RefObject<HTMLInputElement>;
     triggerRef: React.RefObject<HTMLDivElement>;
+    optionContainerEl: React.RefObject<HTMLDivElement>;
     optionsRef: React.RefObject<any>;
     virtualizeListRef: React.RefObject<any>;
     selectOptionListID: string;
+    selectID: string;
     clickOutsideHandler: (e: MouseEvent) => void;
     foundation: SelectFoundation;
     context: ContextValue;
@@ -341,13 +344,16 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             keyboardEventSet: {},
             optionGroups: [],
             isHovering: false,
+            isFocusInContainer: false,
         };
         /* Generate random string */
         this.selectOptionListID = '';
+        this.selectID = '';
         this.virtualizeListRef = React.createRef();
         this.inputRef = React.createRef();
         this.triggerRef = React.createRef();
         this.optionsRef = React.createRef();
+        this.optionContainerEl = React.createRef();
         this.clickOutsideHandler = null;
         this.onSelect = this.onSelect.bind(this);
         this.onClear = this.onClear.bind(this);
@@ -355,7 +361,6 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         this.onMouseLeave = this.onMouseLeave.bind(this);
         this.renderOption = this.renderOption.bind(this);
         this.onKeyPress = this.onKeyPress.bind(this);
-        this.onClearBtnEnterPress = this.onClearBtnEnterPress.bind(this);
 
         this.foundation = new SelectFoundation(this.adapter);
 
@@ -370,6 +375,8 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         );
     }
 
+    setOptionContainerEl = (node: HTMLDivElement) => (this.optionContainerEl = { current: node });
+
     get adapter(): SelectAdapter<SelectProps, SelectState> {
         const keyboardAdapter = {
             registerKeyDown: (cb: () => void) => {
@@ -536,6 +543,21 @@ class Select extends BaseComponent<SelectProps, SelectState> {
 
                 }
             },
+            getContainer: () => {
+                return this.optionContainerEl && this.optionContainerEl.current;
+            },
+            getFocusableElements: (node: HTMLDivElement) => {
+                return getFocusableElements(node);
+            },
+            getActiveElement: () => {
+                return getActiveElement();
+            },
+            setIsFocusInContainer: (isFocusInContainer: boolean) => {
+                this.setState({ isFocusInContainer });
+            },
+            getIsFocusInContainer: () => {
+                return this.state.isFocusInContainer;
+            },
             updateScrollTop: (index?: number) => {
                 // eslint-disable-next-line max-len
                 let optionClassName = `.${prefixcls}-option-selected`;
@@ -565,6 +587,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
     componentDidMount() {
         this.foundation.init();
         this.selectOptionListID = getUuidShort();
+        this.selectID = this.props.id || getUuidShort();
     }
 
     componentWillUnmount() {
@@ -595,13 +618,13 @@ class Select extends BaseComponent<SelectProps, SelectState> {
     handleInputChange = (value: string) => this.foundation.handleInputChange(value);
 
     renderInput() {
-        const { size, multiple, disabled, inputProps } = this.props;
+        const { size, multiple, disabled, inputProps, filter } = this.props;
         const inputPropsCls = get(inputProps, 'className');
         const inputcls = cls(`${prefixcls}-input`, {
             [`${prefixcls}-input-single`]: !multiple,
             [`${prefixcls}-input-multiple`]: multiple,
         }, inputPropsCls);
-        const { inputValue } = this.state;
+        const { inputValue, focusIndex } = this.state;
 
         const selectInputProps: Record<string, any> = {
             value: inputValue,
@@ -623,11 +646,18 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             <Input
                 ref={this.inputRef as any}
                 size={size}
+                aria-activedescendant={focusIndex !== -1 ? `${this.selectID}-option-${focusIndex}`: ''}
                 onFocus={(e: React.FocusEvent<HTMLInputElement>) => {
+                    // if multiple and filter, when use tab key to let select get focus
+                    // need to manual update state isFocus to let the focus style take effect
+                    if (multiple && Boolean(filter)){
+                        this.setState({ isFocus: true });
+                    }
                     // prevent event bubbling which will fire trigger onFocus event
                     e.stopPropagation();
                     // e.nativeEvent.stopImmediatePropagation();
                 }}
+                onBlur={e => this.foundation.handleInputBlur(e)}
                 {...selectInputProps}
             />
         );
@@ -666,10 +696,6 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         this.foundation.handleClearClick(e as any);
     }
 
-    /* istanbul ignore next */
-    onClearBtnEnterPress(e: React.KeyboardEvent) {
-        this.foundation.handleClearBtnEnterPress(e as any);
-    }
 
     renderEmpty() {
         return <Option empty={true} emptyContent={this.props.emptyContent} />;
@@ -712,6 +738,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                     key={option.key || option.label as string + option.value as string + optionIndex}
                     renderOptionItem={renderOptionItem}
                     inputValue={inputValue}
+                    id={`${this.selectID}-option-${optionIndex}`}
                 >
                     {option.label}
                 </Option>
@@ -837,7 +864,14 @@ class Select extends BaseComponent<SelectProps, SelectState> {
 
         const isEmpty = !options.length || !options.some(item => item._show);
         return (
-            <div id={`${prefixcls}-${this.selectOptionListID}`} className={dropdownClassName} style={style}>
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+            <div 
+                id={`${prefixcls}-${this.selectOptionListID}`} 
+                className={dropdownClassName} 
+                style={style} 
+                ref={this.setOptionContainerEl} 
+                onKeyDown={e => this.foundation.handleContainerKeyDown(e)}
+            >
                 {outerTopSlot}
                 <div
                     style={{ maxHeight: `${maxHeight}px` }}
@@ -930,7 +964,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             };
             if (isRenderInTag) {
                 return (
-                    <Tag {...basic} color="white" size={size || 'large'} key={value}>
+                    <Tag {...basic} color="white" size={size || 'large'} key={value} tabIndex={-1}>
                         {content}
                     </Tag>
                 );
@@ -956,7 +990,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
 
         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<"custom"> tagList={tags} maxTagCount={n} restCount={maxTagCount ? selectedItems.length - maxTagCount : undefined} size="large" mode="custom" />;
+        const tagContent = NotOneLine ? tags : <TagGroup<"custom"> tagList={tags} maxTagCount={n} restCount={maxTagCount ? selectedItems.length - maxTagCount : undefined} size="large" mode="custom"/>;
 
         return (
             <>
@@ -1055,7 +1089,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             arrowIcon,
         } = this.props;
 
-        const { selections, isOpen, keyboardEventSet, inputValue, isHovering, isFocus } = this.state;
+        const { selections, isOpen, keyboardEventSet, inputValue, isHovering, isFocus, showInput, focusIndex } = this.state;
         const useCustomTrigger = typeof triggerRender === 'function';
         const filterable = Boolean(filter); // filter（boolean || function）
         const selectionCls = useCustomTrigger ?
@@ -1109,32 +1143,31 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                     </div>
                 </Fragment>,
                 <Fragment key="clearicon">
-                    {showClear ? (
-                        <div
-                            role="button"
-                            aria-label="Clear selected value"
-                            tabIndex={0}
-                            className={cls(`${prefixcls}-clear`)}
-                            onClick={this.onClear}
-                            onKeyPress={this.onClearBtnEnterPress}
-                        >
-                            <IconClear />
-                        </div>
-                    ) : arrowContent}
+                    {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+                    {showClear ? ( <div className={cls(`${prefixcls}-clear`)} onClick={this.onClear}><IconClear /></div>) : arrowContent}
                 </Fragment>,
                 <Fragment key="suffix">{suffix ? this.renderSuffix() : null}</Fragment>,
             ]
         );
 
-        const tabIndex = disabled ? null : 0;
+        /**
+         * 
+         * In disabled, searchable single-selection and display input, and searchable multi-selection
+         * make combobox not focusable by tab key
+         * 
+         * 在disabled，可搜索单选且显示input框，以及可搜索多选情况下
+         * 让combobox无法通过tab聚焦
+         */
+        const tabIndex = (disabled || (filterable && showInput) || (filterable && multiple)) ? -1 : 0;
         return (
+            /* eslint-disable-next-line jsx-a11y/aria-activedescendant-has-tabindex */
             <div
                 role="combobox"
                 aria-disabled={disabled}
                 aria-expanded={isOpen}
                 aria-controls={`${prefixcls}-${this.selectOptionListID}`}
                 aria-haspopup="listbox"
-                aria-label="select value"
+                aria-label={selections.size ? 'selected' : ''} // if there is a value, expect the narration to speak selected
                 aria-invalid={this.props['aria-invalid']}
                 aria-errormessage={this.props['aria-errormessage']}
                 aria-labelledby={this.props['aria-labelledby']}
@@ -1144,11 +1177,12 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                 ref={ref => ((this.triggerRef as any).current = ref)}
                 onClick={e => this.foundation.handleClick(e)}
                 style={style}
-                id={id}
+                id={this.selectID}
                 tabIndex={tabIndex}
+                aria-activedescendant={focusIndex !== -1 ? `${this.selectID}-option-${focusIndex}`: ''}
                 onMouseEnter={this.onMouseEnter}
                 onMouseLeave={this.onMouseLeave}
-                // onFocus={e => this.foundation.handleTriggerFocus(e)}
+                onFocus={e => this.foundation.handleTriggerFocus(e)}
                 onBlur={e => this.foundation.handleTriggerBlur(e as any)}
                 onKeyPress={this.onKeyPress}
                 {...keyboardEventSet}
@@ -1193,6 +1227,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                 position={position}
                 spacing={spacing}
                 stopPropagation={stopPropagation}
+                disableArrowKeyDown={true}
                 onVisibleChange={status => this.handlePopoverVisibleChange(status)}
             >
                 {selection}

package/select/option.tsx

@@ -88,6 +88,7 @@ class Option extends PureComponent<OptionProps> {
             prefixCls,
             renderOptionItem,
             inputValue,
+            id,
             ...rest
         } = this.props;
         const optionClassName = classNames(prefixCls, {
@@ -146,6 +147,7 @@ class Option extends PureComponent<OptionProps> {
                 }}
                 onMouseEnter={e => onMouseEnter && onMouseEnter(e)}
                 role="option"
+                id={id}
                 aria-selected={selected ? "true" : "false"}
                 aria-disabled={disabled ? "true" : "false"}
                 style={style}

package/tag/index.tsx

@@ -119,10 +119,11 @@ export default class Tag extends Component<TagProps, TagState> {
     }
 
     render() {
-        const { children, size, color, closable, visible, onClose, onClick, className, type, avatarSrc, avatarShape, ...attr } = this.props;
+        const { children, size, color, closable, visible, onClose, onClick, className, type, avatarSrc, avatarShape, tabIndex, ...attr } = this.props;
         const { visible: isVisible } = this.state;
         const clickable = onClick !== Tag.defaultProps.onClick || closable;
-        const a11yProps = { role: 'button', tabIndex: 0, onKeyDown: this.handleKeyDown };
+        // only when the Tag is clickable or closable, the value of tabIndex is allowed to be passed in. 
+        const a11yProps = { role: 'button', tabIndex: tabIndex | 0, onKeyDown: this.handleKeyDown };
         const baseProps = {
             ...attr,
             onClick,

package/tag/interface.ts

@@ -35,6 +35,7 @@ export interface TagProps {
     avatarShape?: AvatarShape;
     onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
     'aria-label'?: React.AriaAttributes['aria-label'];
+    tabIndex?: number; // use internal, when tag in taInput, we want to use left arrow and right arrow to control the tag focus, so the tabIndex need to be -1. 
 }
 
 export interface TagGroupProps {

package/tagInput/_story/tagInput.stories.js

@@ -78,6 +78,24 @@ ShowClear.story = {
   name: 'showClear',
 };
 
+export const Draggable = () => (
+  <>
+    <TagInput draggable defaultValue={['抖音', '火山', '西瓜视频', 'AI Lab', '花亦山', '水之月','轻颜','醒图']} showClear style={style} />
+    <br />
+    <TagInput 
+      draggable
+      defaultValue={['抖音', '火山', '西瓜视频', 'AI Lab', '花亦山', '水之月','轻颜','醒图']} 
+      maxTagCount={5} 
+      showClear 
+      style={style} 
+    />
+  </>
+);
+
+Draggable.story = {
+  name: 'draggable',
+};
+
 export const MaxExceed = () => (
   <>
     <TagInput

package/tagInput/index.tsx

@@ -11,7 +11,7 @@ import {
 } from 'lodash';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/tagInput/constants';
 import '@douyinfe/semi-foundation/tagInput/tagInput.scss';
-import TagInputFoundation, { TagInputAdapter } from '@douyinfe/semi-foundation/tagInput/foundation';
+import TagInputFoundation, { TagInputAdapter, OnSortEndProps } from '@douyinfe/semi-foundation/tagInput/foundation';
 import { ArrayElement } from '../_base/base';
 import { isSemiIcon } from '../_utils';
 import BaseComponent from '../_base/baseComponent';
@@ -19,12 +19,27 @@ import Tag from '../tag';
 import Input from '../input';
 import Popover, { PopoverProps } from '../popover';
 import Paragraph from '../typography/paragraph';
-import { IconClear } from '@douyinfe/semi-icons';
+import { IconClear, IconHandle } from '@douyinfe/semi-icons';
+import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
 
 export type Size = ArrayElement<typeof strings.SIZE_SET>;
 export type RestTagsPopoverProps = PopoverProps;
 type ValidateStatus = "default" | "error" | "warning";
 
+const SortableItem = SortableElement(props => props.item);
+
+const SortableList = SortableContainer(
+    ({ items }) => {
+        return (
+            <div style={{ display: 'flex', flexFlow: 'row wrap', }}>
+                {items.map((item, index) => (
+                    // @ts-ignore skip SortableItem type check
+                    <SortableItem key={item.key} index={index} item={item.item}></SortableItem>
+                ))}
+            </div>
+        );
+    });
+
 export interface TagInputProps {
     className?: string;
     defaultValue?: string[];
@@ -38,6 +53,8 @@ export interface TagInputProps {
     showContentTooltip?: boolean;
     allowDuplicates?: boolean;
     addOnBlur?: boolean;
+    draggable?: boolean;
+    expandRestTagsOnClick?: boolean;
     onAdd?: (addedValue: string[]) => void;
     onBlur?: (e: React.MouseEvent<HTMLInputElement>) => void;
     onChange?: (value: string[]) => void;
@@ -69,6 +86,7 @@ export interface TagInputState {
     inputValue?: string;
     focusing?: boolean;
     hovering?: boolean;
+    active?: boolean;
 }
 
 const prefixCls = cssClasses.PREFIX;
@@ -93,6 +111,8 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         separator: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
         showClear: PropTypes.bool,
         addOnBlur: PropTypes.bool,
+        draggable: PropTypes.bool,
+        expandRestTagsOnClick: PropTypes.bool,
         autoFocus: PropTypes.bool,
         renderTagItem: PropTypes.func,
         onBlur: PropTypes.func,
@@ -118,6 +138,8 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         allowDuplicates: true,
         showRestTagsPopover: true,
         autoFocus: false,
+        draggable: false,
+        expandRestTagsOnClick: true,
         showContentTooltip: true,
         separator: ',',
         size: 'default' as const,
@@ -134,7 +156,9 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
     };
 
     inputRef: React.RefObject<HTMLInputElement>;
+    tagInputRef: React.RefObject<HTMLDivElement>;
     foundation: TagInputFoundation;
+    clickOutsideHandler: any;
 
     constructor(props: TagInputProps) {
         super(props);
@@ -143,9 +167,12 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
             tagsArray: props.defaultValue || [],
             inputValue: '',
             focusing: false,
-            hovering: false
+            hovering: false,
+            active: false,
         };
         this.inputRef = React.createRef();
+        this.tagInputRef = React.createRef();
+        this.clickOutsideHandler = null;
     }
 
     static getDerivedStateFromProps(nextProps: TagInputProps, prevState: TagInputState) {
@@ -190,6 +217,12 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
             setHovering: (hovering: boolean) => {
                 this.setState({ hovering });
             },
+            setActive: (active: boolean) => {
+                this.setState({ active });
+            },
+            getClickOutsideHandler: () => {
+                return this.clickOutsideHandler;
+            },
             notifyBlur: (e: React.MouseEvent<HTMLInputElement>) => {
                 this.props.onBlur(e);
             },
@@ -211,6 +244,21 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
             notifyKeyDown: e => {
                 this.props.onKeyDown(e);
             },
+            registerClickOutsideHandler: cb => {
+                const clickOutsideHandler = (e: Event) => {
+                    const tagInputDom = this.tagInputRef && this.tagInputRef.current;
+                    const target = e.target as Element;
+                    if (tagInputDom && !tagInputDom.contains(target)) {
+                        cb(e);
+                    }
+                };
+                this.clickOutsideHandler = clickOutsideHandler;
+                document.addEventListener('click', clickOutsideHandler, false);
+            },
+            unregisterClickOutsideHandler: () => {
+                document.removeEventListener('click', this.clickOutsideHandler, false);
+                this.clickOutsideHandler = null;
+            },
         };
     }
 
@@ -218,7 +266,9 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         const { disabled, autoFocus, preventScroll } = this.props;
         if (!disabled && autoFocus) {
             this.inputRef.current.focus({ preventScroll });
+            this.foundation.handleClick();
         }
+        this.foundation.init();
     }
 
     handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -254,6 +304,10 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         this.foundation.handleInputMouseLeave();
     };
 
+    handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        this.foundation.handleClick(e);
+    };
+
     handleInputMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
         this.foundation.handleInputMouseEnter();
     };
@@ -338,34 +392,37 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         );
     }
 
-    renderTags() {
+    getAllTags = () => {
         const {
             size,
             disabled,
             renderTagItem,
-            maxTagCount,
             showContentTooltip,
-            showRestTagsPopover,
-            restTagsPopoverProps = {},
+            draggable,
         } = this.props;
-        const { tagsArray } = this.state;
+        const { tagsArray, active } = this.state;
+        const showIconHandler = active && draggable;
         const tagCls = cls(`${prefixCls}-wrapper-tag`, {
             [`${prefixCls}-wrapper-tag-size-${size}`]: size,
+            [`${prefixCls}-wrapper-tag-icon`]: showIconHandler,
         });
         const typoCls = cls(`${prefixCls}-wrapper-typo`, {
-            [`${prefixCls}-wrapper-typo-disabled`]: disabled
+            [`${prefixCls}-wrapper-typo-disabled`]: disabled,
         });
-        const restTagsCls = cls(`${prefixCls}-wrapper-n`, {
-            [`${prefixCls}-wrapper-n-disabled`]: disabled
+        const itemWrapperCls = cls({
+            [`${prefixCls}-drag-item`]: showIconHandler,
+            [`${prefixCls}-wrapper-tag-icon`]: showIconHandler,
         });
-        const restTags: Array<React.ReactNode> = [];
-        const tags: Array<React.ReactNode> = [];
-        tagsArray.forEach((value, index) => {
-            let item = null;
+        const DragHandle = SortableHandle(() => <IconHandle className={`${prefixCls}-drag-handler`}></IconHandle>);
+        return tagsArray.map((value, index) => {
+            const elementKey = showIconHandler ? value : `${index}${value}`;
             if (isFunction(renderTagItem)) {
-                item = renderTagItem(value, index);
+                return showIconHandler? (<div className={itemWrapperCls} key={elementKey}>
+                    <DragHandle />
+                    {renderTagItem(value, index)}
+                </div>) : renderTagItem(value, index);
             } else {
-                item = (
+                return (
                     <Tag
                         className={tagCls}
                         color="white"
@@ -375,10 +432,11 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
                             !disabled && this.handleTagClose(index);
                         }}
                         closable={!disabled}
-                        key={`${index}${value}`}
+                        key={elementKey}
                         visible
                         aria-label={`${!disabled ? 'Closable ' : ''}Tag: ${value}`}
                     >
+                        {showIconHandler && <DragHandle />}
                         <Paragraph
                             className={typoCls}
                             ellipsis={{ showTooltip: showContentTooltip, rows: 1 }}
@@ -388,17 +446,47 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
                     </Tag>
                 );
             }
-            if (maxTagCount && index >= maxTagCount) {
-                restTags.push(item);
-            } else {
-                tags.push(item);
-            }
         });
+    }
 
+    onSortEnd = (callbackProps: OnSortEndProps) => {
+        this.foundation.handleSortEnd(callbackProps);
+    }
+
+    renderTags() {
+        const {
+            disabled,
+            maxTagCount,
+            showRestTagsPopover,
+            restTagsPopoverProps = {},
+            draggable,
+            expandRestTagsOnClick,
+        } = this.props;
+        const { tagsArray, active } = this.state;
+        const restTagsCls = cls(`${prefixCls}-wrapper-n`, {
+            [`${prefixCls}-wrapper-n-disabled`]: disabled,
+        });
+        const allTags = this.getAllTags();
+        let restTags: Array<React.ReactNode> = [];
+        let tags: Array<React.ReactNode> = [...allTags];
+        if (( !active || !expandRestTagsOnClick) && maxTagCount && maxTagCount < allTags.length){
+            tags = allTags.slice(0, maxTagCount);
+            restTags = allTags.slice(maxTagCount);
+        }
+    
         const restTagsContent = (
             <span className={restTagsCls}>+{tagsArray.length - maxTagCount}</span>
         );
 
+        const sortableListItems = allTags.map((item, index) => ({
+            item: item,
+            key: tagsArray[index],
+        }));
+
+        if (active && draggable && sortableListItems.length > 0) {
+            // @ts-ignore skip SortableItem type check
+            return <SortableList useDragHandle items={sortableListItems} onSortEnd={this.onSortEnd} axis={"xy"} />;
+        } 
         return (
             <>
                 {tags}
@@ -426,11 +514,17 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
 
     blur() {
         this.inputRef.current.blur();
+        // unregister clickOutside event 
+        this.foundation.clickOutsideCallBack();
     }
 
     focus() {
-        const { preventScroll } = this.props;
+        const { preventScroll, disabled } = this.props;
         this.inputRef.current.focus({ preventScroll });
+        if (!disabled) {
+            // register clickOutside event 
+            this.foundation.handleClick();
+        }
     }
 
     render() {
@@ -447,11 +541,12 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
             focusing,
             hovering,
             tagsArray,
-            inputValue
+            inputValue,
+            active,
         } = this.state;
 
         const tagInputCls = cls(prefixCls, className, {
-            [`${prefixCls}-focus`]: focusing,
+            [`${prefixCls}-focus`]: focusing || active,
             [`${prefixCls}-disabled`]: disabled,
             [`${prefixCls}-hover`]: hovering && !disabled,
             [`${prefixCls}-error`]: validateStatus === 'error',
@@ -463,7 +558,9 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         const wrapperCls = cls(`${prefixCls}-wrapper`);
 
         return (
+            // eslint-disable-next-line 
             <div
+                ref={this.tagInputRef}
                 style={style}
                 className={tagInputCls}
                 aria-disabled={disabled}
@@ -475,6 +572,9 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
                 onMouseLeave={e => {
                     this.handleInputMouseLeave(e);
                 }}
+                onClick={e => {   
+                    this.handleClick(e);
+                }}
             >
                 {this.renderPrefix()}
                 <div className={wrapperCls}>