diff --git a/components/_util/getTransitionGroupProps.js b/components/_util/getTransitionGroupProps.js
index 701ca4162..ff89c570d 100644
--- a/components/_util/getTransitionGroupProps.js
+++ b/components/_util/getTransitionGroupProps.js
@@ -3,18 +3,18 @@ const getTransitionGroupProps = (transitionName, opt = {}) => {
   if (process.env.NODE_ENV === 'test') {
     return { css: false, ...opt };
   }
-  const transitionProps = {
+  const transitionProps = transitionName ? {
     appear: true,
     appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
     appearActiveClass: `${transitionName}`,
-    appearToClass: `${transitionName}-appear-active`,
+    appearToClass: `${transitionName}-appear ${transitionName}-appear-active`,
     enterFromClass: `${transitionName}-appear ${transitionName}-enter ${transitionName}-appear-prepare ${transitionName}-enter-prepare`,
     enterActiveClass: `${transitionName}`,
-    enterToClass: `${transitionName}-appear-active ${transitionName}-enter-active`,
+    enterToClass: `${transitionName}-enter ${transitionName}-appear ${transitionName}-appear-active ${transitionName}-enter-active`,
     leaveActiveClass: `${transitionName} ${transitionName}-leave`,
     leaveToClass: `${transitionName}-leave-active`,
     ...opt,
-  };
+  } : { css: false, ...opt };
   return transitionProps;
 };
 
diff --git a/components/_util/getTransitionProps.js b/components/_util/getTransitionProps.js
index 64ca23e5c..6a23b224a 100644
--- a/components/_util/getTransitionProps.js
+++ b/components/_util/getTransitionProps.js
@@ -2,7 +2,7 @@ const getTransitionProps = (transitionName, opt = {}) => {
   if (process.env.NODE_ENV === 'test') {
     return { css: false, ...opt };
   }
-  const transitionProps = {
+  const transitionProps = transitionName ? {
     appear: true,
     appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
     // appearActiveClass: `antdv-base-transtion`,
@@ -14,7 +14,7 @@ const getTransitionProps = (transitionName, opt = {}) => {
     leaveActiveClass: `${transitionName}-leave ${transitionName}-leave-active`,
     leaveToClass: `${transitionName}-leave ${transitionName}-leave-active`,
     ...opt,
-  };
+  }: { css: false, ...opt };
   return transitionProps;
 };
 
diff --git a/components/upload/UploadList.jsx b/components/upload/UploadList.jsx
index 48d9bb0b0..758e6358a 100644
--- a/components/upload/UploadList.jsx
+++ b/components/upload/UploadList.jsx
@@ -15,6 +15,7 @@ import Tooltip from '../tooltip';
 import Progress from '../progress';
 import classNames from '../_util/classNames';
 import { UploadListProps } from './interface';
+import getTransitionGroupProps from '../_util/getTransitionGroupProps';
 
 export default {
   name: 'AUploadList',
@@ -265,7 +266,7 @@ export default {
       [`${prefixCls}-list-${listType}`]: true,
     });
     const animationDirection = listType === 'picture-card' ? 'animate-inline' : 'animate';
-    const transitionGroupProps = getTransitionProps(`${prefixCls}-${animationDirection}`);
+    const transitionGroupProps = getTransitionGroupProps(`${prefixCls}-${animationDirection}`);
     return (
       <TransitionGroup {...transitionGroupProps} tag="div" class={listClassNames}>
         {list}
diff --git a/components/vc-notification/Notification.jsx b/components/vc-notification/Notification.jsx
index 846d42f1c..e168fb536 100644
--- a/components/vc-notification/Notification.jsx
+++ b/components/vc-notification/Notification.jsx
@@ -3,8 +3,8 @@ import PropTypes from '../_util/vue-types';
 import { getComponent } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import createChainedFunction from '../_util/createChainedFunction';
-import getTransitionProps from '../_util/getTransitionProps';
 import Notice from './Notice';
+import getTransitionGroupProps from '../_util/getTransitionGroupProps';
 
 function noop() {}
 
@@ -75,7 +75,7 @@ const Notification = defineComponent({
 
   render() {
     const { prefixCls, notices, remove, getTransitionName, $attrs } = this;
-    const transitionProps = getTransitionProps(getTransitionName());
+    const transitionProps = getTransitionGroupProps(getTransitionName());
     const noticeNodes = notices.map((notice, index) => {
       const update = Boolean(index === notices.length - 1 && notice.updateKey);
       const key = notice.updateKey ? notice.updateKey : notice.key;
diff --git a/components/vc-select/Selector/MultipleSelector.tsx b/components/vc-select/Selector/MultipleSelector.tsx
index b97efcac5..7acb6e693 100644
--- a/components/vc-select/Selector/MultipleSelector.tsx
+++ b/components/vc-select/Selector/MultipleSelector.tsx
@@ -158,11 +158,9 @@ const SelectSelector = defineComponent<SelectorProps>({
               : maxTagPlaceholder,
         });
       }
-      const transitionProps = choiceTransitionName
-        ? getTransitionGroupProps(choiceTransitionName, {
-            appear: motionAppear,
-          })
-        : { css: false };
+      const transitionProps = getTransitionGroupProps(choiceTransitionName, {
+        appear: motionAppear,
+      })
       selectionNode.value = (
         <TransitionGroup {...transitionProps}>
           {...displayValues.map(
diff --git a/components/vc-tree-select/src/Base/BaseSelector.jsx b/components/vc-tree-select/src/Base/BaseSelector.jsx
index 1300f13cf..0a3beed21 100644
--- a/components/vc-tree-select/src/Base/BaseSelector.jsx
+++ b/components/vc-tree-select/src/Base/BaseSelector.jsx
@@ -30,10 +30,12 @@ export const selectorPropTypes = () => ({
   placeholder: PropTypes.any,
   disabled: PropTypes.looseBool,
   focused: PropTypes.looseBool,
+  isMultiple: PropTypes.looseBool,
+  showSearch: PropTypes.looseBool,
 });
 
 function noop() {}
-export default function(modeName) {
+export default function() {
   const BaseSelector = {
     name: 'BaseSelector',
     inheritAttrs: false,
@@ -101,7 +103,7 @@ export default function(modeName) {
         }
         const clearIcon = getComponent(this, 'clearIcon');
         return (
-          <span key="clear" class={`${prefixCls}-selection__clear`} onClick={onSelectorClear}>
+          <span key="clear" unselectable="on" aria-hidden="true" style="user-select: none;" class={`${prefixCls}-clear`} onClick={onSelectorClear}>
             {clearIcon}
           </span>
         );
@@ -114,7 +116,7 @@ export default function(modeName) {
         }
         const inputIcon = getComponent(this, 'inputIcon');
         return (
-          <span key="arrow" class={`${prefixCls}-arrow`} style={{ outline: 'none' }}>
+          <span key="arrow" class={`${prefixCls}-arrow`} style={{ outline: 'none', userSelect: 'none' }}>
             {inputIcon}
           </span>
         );
@@ -132,6 +134,9 @@ export default function(modeName) {
         renderSelection,
         renderPlaceholder,
         tabindex,
+        isMultiple,
+        showArrow,
+        showSearch,
       } = this.$props;
       const { class: className, style, onClick = noop } = this.$attrs;
       const {
@@ -142,18 +147,21 @@ export default function(modeName) {
       if (disabled) {
         myTabIndex = null;
       }
-
+      const mergedClassName = classNames(prefixCls, className, {
+        [`${prefixCls}-focused`]: open || focused,
+        [`${prefixCls}-multiple`]: isMultiple,
+        [`${prefixCls}-single`]: !isMultiple,
+        [`${prefixCls}-allow-clear`]: allowClear,
+        [`${prefixCls}-show-arrow`]: showArrow,
+        [`${prefixCls}-disabled`]: disabled,
+        [`${prefixCls}-open`]: open,
+        [`${prefixCls}-show-search`]: showSearch,
+      });
       return (
-        <span
+        <div
           style={style}
           onClick={onClick}
-          class={classNames(className, prefixCls, {
-            [`${prefixCls}-open`]: open,
-            [`${prefixCls}-focused`]: open || focused,
-            [`${prefixCls}-disabled`]: disabled,
-            [`${prefixCls}-enabled`]: !disabled,
-            [`${prefixCls}-allow-clear`]: allowClear,
-          })}
+          class={mergedClassName}
           ref={this.domRef}
           role="combobox"
           aria-expanded={open}
@@ -166,17 +174,13 @@ export default function(modeName) {
           onBlur={this.onBlur}
           onKeydown={onSelectorKeyDown}
         >
-          <span
-            key="selection"
-            class={classNames(`${prefixCls}-selection`, `${prefixCls}-selection--${modeName}`)}
-          >
+          <span class={`${prefixCls}-selector`}>
             {renderSelection()}
-            {this.renderClear()}
-            {this.renderArrow()}
-
             {renderPlaceholder && renderPlaceholder()}
           </span>
-        </span>
+          {this.renderArrow()}
+          {this.renderClear()}
+        </div>
       );
     },
   };
diff --git a/components/vc-tree-select/src/Popup/SinglePopup.jsx b/components/vc-tree-select/src/Popup/SinglePopup.jsx
index 3a06e156e..179be5e23 100644
--- a/components/vc-tree-select/src/Popup/SinglePopup.jsx
+++ b/components/vc-tree-select/src/Popup/SinglePopup.jsx
@@ -40,7 +40,7 @@ const SinglePopup = {
             display: searchValue ? 'none' : 'block',
           }}
           onClick={this.onPlaceholderClick}
-          class={`${prefixCls}-search__field__placeholder`}
+          class={`${prefixCls}-selection-placeholder`}
         >
           {searchPlaceholder}
         </span>
diff --git a/components/vc-tree-select/src/SearchInput.jsx b/components/vc-tree-select/src/SearchInput.jsx
index 99ef80d96..b7f8dcea9 100644
--- a/components/vc-tree-select/src/SearchInput.jsx
+++ b/components/vc-tree-select/src/SearchInput.jsx
@@ -4,7 +4,7 @@
  * - multiple: in the selector
  * Move the code as a SearchInput for easy management.
  */
-import { inject, withDirectives } from 'vue';
+import { inject, withDirectives, ref, onMounted, computed, watch } from 'vue';
 import antInput from '../../_util/antInputDirective';
 import PropTypes from '../../_util/vue-types';
 import { createRef } from './util';
@@ -21,8 +21,22 @@ const SearchInput = {
     needAlign: PropTypes.looseBool,
     ariaId: PropTypes.string,
   },
-  setup() {
+  setup(props) {
+    const measureRef = ref();
+    const inputWidth = ref(0);
+    // We measure width and set to the input immediately
+    onMounted(() => {
+      watch(
+        computed(()=>props.searchValue),
+        () => {
+          inputWidth.value = measureRef.value.scrollWidth;
+        },
+        { flush: 'post' },
+      );
+    });
     return {
+      measureRef,
+      inputWidth,
       vcTreeSelect: inject('vcTreeSelect', {}),
     };
   },
@@ -38,7 +52,7 @@ const SearchInput = {
   },
   created() {
     this.inputRef = createRef();
-    this.mirrorInputRef = createRef();
+    // this.mirrorInputRef = createRef();
     this.prevProps = { ...this.$props };
   },
   mounted() {
@@ -55,15 +69,15 @@ const SearchInput = {
   },
 
   updated() {
-    const { open, searchValue, needAlign } = this.$props;
+    const { open } = this.$props;
     const { prevProps } = this;
     this.$nextTick(() => {
       if (open && prevProps.open !== open) {
         this.focus();
       }
-      if (needAlign && searchValue !== prevProps.searchValue) {
-        this.alignInputWidth();
-      }
+      // if (needAlign && searchValue !== prevProps.searchValue) {
+      //   this.alignInputWidth();
+      // }
       this.prevProps = { ...this.$props };
     });
   },
@@ -73,10 +87,10 @@ const SearchInput = {
      * ref: https://github.com/react-component/tree-select/issues/65
      *  clientWidth 0 when mounted in vue. why?
      */
-    alignInputWidth() {
-      this.inputRef.current.style.width = `${this.mirrorInputRef.current.clientWidth ||
-        this.mirrorInputRef.current.offsetWidth}px`;
-    },
+    // alignInputWidth() {
+    //   this.inputRef.current.style.width = `${this.mirrorInputRef.current.clientWidth ||
+    //     this.mirrorInputRef.current.offsetWidth}px`;
+    // },
 
     /**
      * Need additional timeout for focus cause parent dom is not ready when didMount trigger
@@ -116,31 +130,34 @@ const SearchInput = {
       vcTreeSelect: { onSearchInputKeyDown },
       handleInputChange,
       mirrorSearchValue,
+      inputWidth,
     } = this;
     return (
-      <span class={`${prefixCls}-search__field__wrap`}>
-        {withDirectives(
-          <input
-            type="text"
-            ref={this.inputRef}
-            onInput={handleInputChange}
-            onChange={handleInputChange}
-            onKeydown={onSearchInputKeyDown}
-            value={searchValue}
-            disabled={disabled}
-            class={`${prefixCls}-search__field`}
-            aria-label="filter select"
-            aria-autocomplete="list"
-            aria-controls={open ? ariaId : undefined}
-            aria-multiline="false"
-          />,
-          [[antInput]],
-        )}
-        <span ref={this.mirrorInputRef} class={`${prefixCls}-search__field__mirror`}>
-          {mirrorSearchValue}&nbsp;
+      <>
+        <span class={`${prefixCls}-selection-search`} style={{ width: inputWidth + 'px' }}>
+          {withDirectives(
+            <input
+              type="text"
+              ref={this.inputRef}
+              onInput={handleInputChange}
+              onChange={handleInputChange}
+              onKeydown={onSearchInputKeyDown}
+              value={searchValue}
+              disabled={disabled}
+              class={`${prefixCls}-selection-search-input`}
+              aria-label="filter select"
+              aria-autocomplete="list"
+              aria-controls={open ? ariaId : undefined}
+              aria-multiline="false"
+            />,
+            [[antInput]],
+          )}
+          <span ref="measureRef" class={`${prefixCls}-selection-search-mirror`} aria-hidden>
+            {mirrorSearchValue}&nbsp;
+          </span>
         </span>
         {renderPlaceholder && !mirrorSearchValue ? renderPlaceholder() : null}
-      </span>
+      </>
     );
   },
 };
diff --git a/components/vc-tree-select/src/Select.jsx b/components/vc-tree-select/src/Select.jsx
index 0565f0ff6..240491eeb 100644
--- a/components/vc-tree-select/src/Select.jsx
+++ b/components/vc-tree-select/src/Select.jsx
@@ -1096,7 +1096,7 @@ const Select = defineComponent({
     const $popup = <Popup {...popupProps} __propsSymbol__={[]} />;
 
     const Selector = isMultiple ? MultipleSelector : SingleSelector;
-    const $selector = <Selector {...passProps} ref={this.selectorRef} />;
+    const $selector = <Selector {...passProps} isMultiple={isMultiple} ref={this.selectorRef} />;
     const selectTriggerProps = {
       ...passProps,
       popupElement: $popup,
diff --git a/components/vc-tree-select/src/Selector/MultipleSelector/Selection.jsx b/components/vc-tree-select/src/Selector/MultipleSelector/Selection.jsx
index 11f13cebf..50d21ae13 100644
--- a/components/vc-tree-select/src/Selector/MultipleSelector/Selection.jsx
+++ b/components/vc-tree-select/src/Selector/MultipleSelector/Selection.jsx
@@ -32,20 +32,20 @@ const Selection = {
     }
     const { class: className, style, onRemove } = this.$attrs;
     return (
-      <li
+      <span
         style={{ ...UNSELECTABLE_STYLE, ...style }}
         {...UNSELECTABLE_ATTRIBUTE}
         role="menuitem"
-        class={classNames(`${prefixCls}-selection__choice`, className)}
+        class={classNames(`${prefixCls}-selection-item`, className)}
         title={toTitle(label)}
       >
+        <span class={`${prefixCls}-selection-item-content`}>{content}</span>
         {onRemove && (
-          <span class={`${prefixCls}-selection__choice__remove`} onClick={this.onRemove}>
+          <span class={`${prefixCls}-selection-item-remove`} onClick={this.onRemove}>
             {getComponent(this, 'removeIcon')}
           </span>
         )}
-        <span class={`${prefixCls}-selection__choice__content`}>{content}</span>
-      </li>
+      </span>
     );
   },
 };
diff --git a/components/vc-tree-select/src/Selector/MultipleSelector/SelectorList.jsx b/components/vc-tree-select/src/Selector/MultipleSelector/SelectorList.jsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/vc-tree-select/src/Selector/MultipleSelector/index.jsx b/components/vc-tree-select/src/Selector/MultipleSelector/index.jsx
index bdcf931c5..e3be42087 100644
--- a/components/vc-tree-select/src/Selector/MultipleSelector/index.jsx
+++ b/components/vc-tree-select/src/Selector/MultipleSelector/index.jsx
@@ -1,11 +1,10 @@
-import { inject, TransitionGroup } from 'vue';
+import { inject } from 'vue';
 import PropTypes from '../../../../_util/vue-types';
 import { createRef } from '../../util';
 import generateSelector, { selectorPropTypes } from '../../Base/BaseSelector';
 import SearchInput from '../../SearchInput';
 import Selection from './Selection';
 import { getComponent, getSlot } from '../../../../_util/props-util';
-import getTransitionProps from '../../../../_util/getTransitionProps';
 import BaseMixin from '../../../../_util/BaseMixin';
 const TREE_SELECT_EMPTY_VALUE_KEY = 'RC_TREE_SELECT_EMPTY_VALUE_KEY';
 
@@ -73,7 +72,7 @@ const MultipleSelector = {
             display: hidden ? 'none' : 'block',
           }}
           onClick={this.onPlaceholderClick}
-          class={`${prefixCls}-search__field__placeholder`}
+          class={`${prefixCls}-selection-placeholder`}
         >
           {currentPlaceholder}
         </span>
@@ -85,8 +84,6 @@ const MultipleSelector = {
     renderSelection() {
       const {
         selectorValueList,
-        choiceTransitionName,
-        prefixCls,
         labelInValue,
         maxTagCount,
       } = this.$props;
@@ -144,7 +141,6 @@ const MultipleSelector = {
       }
 
       selectedValueNodes.push(
-        <li class={`${prefixCls}-search ${prefixCls}-search--inline`} key="__input">
           <SearchInput
             {...{
               ...this.$props,
@@ -154,26 +150,10 @@ const MultipleSelector = {
             ref={this.inputRef}
           >
             {children}
-          </SearchInput>
-        </li>,
-      );
-      const className = `${prefixCls}-selection__rendered`;
-      if (choiceTransitionName) {
-        const transitionProps = getTransitionProps(choiceTransitionName, {
-          tag: 'ul',
-          onAfterLeave: this.onChoiceAnimationLeave,
-        });
-        return (
-          <TransitionGroup class={className} {...transitionProps}>
-            {selectedValueNodes}
-          </TransitionGroup>
-        );
-      }
-      return (
-        <ul class={className} role="menubar">
-          {selectedValueNodes}
-        </ul>
+          </SearchInput>,
       );
+
+      return selectedValueNodes;
     },
   },
 
diff --git a/components/vc-tree-select/src/Selector/SingleSelector.jsx b/components/vc-tree-select/src/Selector/SingleSelector.jsx
index 3070fdcaf..47c5e4f0d 100644
--- a/components/vc-tree-select/src/Selector/SingleSelector.jsx
+++ b/components/vc-tree-select/src/Selector/SingleSelector.jsx
@@ -21,24 +21,20 @@ const SingleSelector = {
     renderSelection() {
       const { selectorValueList, placeholder, prefixCls } = this.$props;
 
-      let innerNode;
-
       if (selectorValueList.length) {
         const { label, value } = selectorValueList[0];
-        innerNode = (
-          <span key="value" title={toTitle(label)} class={`${prefixCls}-selection-selected-value`}>
+        return (
+          <span key="value" title={toTitle(label)} class={`${prefixCls}-selection-item`}>
             {label || value}
           </span>
         );
       } else {
-        innerNode = (
-          <span key="placeholder" class={`${prefixCls}-selection__placeholder`}>
+        return (
+          <span key="placeholder" class={`${prefixCls}-selection-placeholder`}>
             {placeholder}
           </span>
         );
       }
-
-      return <span class={`${prefixCls}-selection__rendered`}>{innerNode}</span>;
     },
   },