diff --git a/examples/basic.tsx b/examples/basic.tsx
index 4ccc7bb1..4a3b124b 100644
--- a/examples/basic.tsx
+++ b/examples/basic.tsx
@@ -134,8 +134,7 @@ class Demo extends React.Component {
     return true;
   };
 
-  filterTreeNode = (input, child) =>
-    String(child.props.title).indexOf(input) === 0;
+  filterTreeNode = (input, child) => String(child.props.title).indexOf(input) === 0;
 
   render() {
     const {
@@ -152,11 +151,7 @@ class Demo extends React.Component {
     return (
       <div style={{ margin: 20 }}>
         <h2>tree-select in dialog</h2>
-        <button
-          type="button"
-          className="btn btn-primary"
-          onClick={this.onClick}
-        >
+        <button type="button" className="btn btn-primary" onClick={this.onClick}>
           show dialog
         </button>
         {visible ? (
@@ -280,7 +275,7 @@ class Demo extends React.Component {
           showCheckedStrategy={SHOW_PARENT}
           onChange={this.onChange}
           onSelect={this.onSelect}
-          maxTagCount={2}
+          maxTagCount="responsive"
           maxTagPlaceholder={valueList => {
             console.log('Max Tag Rest Value:', valueList);
             return `${valueList.length} rest...`;
@@ -368,12 +363,7 @@ class Demo extends React.Component {
           <TreeNode value="" title="parent 1" key="">
             <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-0">
               <TreeNode value="leaf1" title="my leaf" key="random" />
-              <TreeNode
-                value="leaf2"
-                title="your leaf"
-                key="random1"
-                disabled
-              />
+              <TreeNode value="leaf2" title="your leaf" key="random1" disabled />
             </TreeNode>
             <TreeNode value="parent 1-1" title="parent 1-1" key="0-1-1">
               <TreeNode
diff --git a/package.json b/package.json
index e65e6b4b..8342e9da 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-tree-select",
-  "version": "4.1.2",
+  "version": "4.3.0",
   "description": "tree-select ui component for react",
   "keywords": [
     "react",
@@ -66,8 +66,8 @@
   "dependencies": {
     "@babel/runtime": "^7.10.1",
     "classnames": "2.x",
-    "rc-select": "^11.1.1",
-    "rc-tree": "^3.8.0",
+    "rc-select": "^12.0.0",
+    "rc-tree": "^4.0.0",
     "rc-util": "^5.0.5"
   }
 }
diff --git a/src/OptionList.tsx b/src/OptionList.tsx
index a3e9a986..c10c7288 100644
--- a/src/OptionList.tsx
+++ b/src/OptionList.tsx
@@ -3,7 +3,7 @@ import KeyCode from 'rc-util/lib/KeyCode';
 import useMemo from 'rc-util/lib/hooks/useMemo';
 import { RefOptionListProps } from 'rc-select/lib/OptionList';
 import Tree, { TreeProps } from 'rc-tree';
-import { EventDataNode } from 'rc-tree/lib/interface';
+import { EventDataNode, ScrollTo } from 'rc-tree/lib/interface';
 import { FlattenDataNode, RawValueType, DataNode, TreeDataNode, Key } from './interface';
 import { SelectContext } from './Context';
 import useKeyValueMapping from './hooks/useKeyValueMapping';
@@ -52,10 +52,12 @@ export interface OptionListProps<OptionsType extends object[]> {
   onMouseEnter: () => void;
 }
 
-const OptionList: React.RefForwardingComponent<RefOptionListProps, OptionListProps<DataNode[]>> = (
-  props,
-  ref,
-) => {
+type ReviseRefOptionListProps = Omit<RefOptionListProps, 'scrollTo'> & { scrollTo: ScrollTo };
+
+const OptionList: React.RefForwardingComponent<
+  ReviseRefOptionListProps,
+  OptionListProps<DataNode[]>
+> = (props, ref) => {
   const {
     prefixCls,
     height,
@@ -190,6 +192,7 @@ const OptionList: React.RefForwardingComponent<RefOptionListProps, OptionListPro
   const activeEntity = getEntityByKey(activeKey);
 
   React.useImperativeHandle(ref, () => ({
+    scrollTo: treeRef.current?.scrollTo,
     onKeyDown: event => {
       const { which } = event;
       switch (which) {
@@ -280,7 +283,9 @@ const OptionList: React.RefForwardingComponent<RefOptionListProps, OptionListPro
   );
 };
 
-const RefOptionList = React.forwardRef<RefOptionListProps, OptionListProps<DataNode[]>>(OptionList);
+const RefOptionList = React.forwardRef<ReviseRefOptionListProps, OptionListProps<DataNode[]>>(
+  OptionList,
+);
 RefOptionList.displayName = 'OptionList';
 
 export default RefOptionList;
diff --git a/src/TreeSelect.tsx b/src/TreeSelect.tsx
index 2e1cbafe..6d7ac9c6 100644
--- a/src/TreeSelect.tsx
+++ b/src/TreeSelect.tsx
@@ -124,8 +124,6 @@ export interface TreeSelectProps<ValueType = DefaultValueType>
   searchValue?: string;
   autoClearSearchValue?: boolean;
 
-  maxTagTextLength?: number;
-  maxTagCount?: number;
   maxTagPlaceholder?: (omittedValues: LabelValueType[]) => React.ReactNode;
 
   loadData?: (dataNode: LegacyDataNode) => Promise<unknown>;
@@ -202,6 +200,7 @@ const RefTreeSelect = React.forwardRef<RefSelectProps, TreeSelectProps>((props,
   const selectRef = React.useRef<RefSelectProps>(null);
 
   React.useImperativeHandle(ref, () => ({
+    scrollTo: selectRef.current.scrollTo,
     focus: selectRef.current.focus,
     blur: selectRef.current.blur,
   }));
diff --git a/src/utils/valueUtil.ts b/src/utils/valueUtil.ts
index 7701a8c4..760504b8 100644
--- a/src/utils/valueUtil.ts
+++ b/src/utils/valueUtil.ts
@@ -13,6 +13,8 @@ import {
 import { fillLegacyProps } from './legacyUtil';
 import { SkipType } from '../hooks/useKeyValueMapping';
 
+type CompatibleDataNode = Omit<FlattenDataNode, 'level'>;
+
 export function toArray<T>(value: T | T[]): T[] {
   if (Array.isArray(value)) {
     return value;
@@ -20,7 +22,7 @@ export function toArray<T>(value: T | T[]): T[] {
   return value !== undefined ? [value] : [];
 }
 
-export function findValueOption(values: RawValueType[], options: FlattenDataNode[]): DataNode[] {
+export function findValueOption(values: RawValueType[], options: CompatibleDataNode[]): DataNode[] {
   const optionMap: Map<RawValueType, DataNode> = new Map();
 
   options.forEach(flattenItem => {
@@ -31,7 +33,7 @@ export function findValueOption(values: RawValueType[], options: FlattenDataNode
   return values.map(val => fillLegacyProps(optionMap.get(val)));
 }
 
-export function isValueDisabled(value: RawValueType, options: FlattenDataNode[]): boolean {
+export function isValueDisabled(value: RawValueType, options: CompatibleDataNode[]): boolean {
   const option = findValueOption([value], options)[0];
   if (option) {
     return option.disabled;
diff --git a/tests/Select.checkable.spec.js b/tests/Select.checkable.spec.js
index 184e0992..fad39e94 100644
--- a/tests/Select.checkable.spec.js
+++ b/tests/Select.checkable.spec.js
@@ -117,11 +117,7 @@ describe('TreeSelect.checkable', () => {
               onChange={this.handleChange}
               disabled={disabled}
             />
-            <input
-              type="checkbox"
-              onChange={e => this.switch(e.target.checked)}
-              id="checkbox"
-            />{' '}
+            <input type="checkbox" onChange={e => this.switch(e.target.checked)} id="checkbox" />{' '}
             禁用
           </div>
         );
@@ -335,9 +331,7 @@ describe('TreeSelect.checkable', () => {
           ],
         },
       ];
-      const wrapper = mount(
-        <TreeSelect treeCheckable treeData={treeData} open />,
-      );
+      const wrapper = mount(<TreeSelect treeCheckable treeData={treeData} open />);
       wrapper.search('58');
       wrapper.selectNode(2);
       expect(wrapper.getSelection()).toHaveLength(1);
@@ -402,11 +396,7 @@ describe('TreeSelect.checkable', () => {
 
     wrapper.search('0-0');
     wrapper.selectNode(0);
-    expect(onChange).toHaveBeenCalledWith(
-      ['0-1-0', '0-1-2'],
-      expect.anything(),
-      expect.anything(),
-    );
+    expect(onChange).toHaveBeenCalledWith(['0-1-0', '0-1-2'], expect.anything(), expect.anything());
   });
 
   // https://github.com/ant-design/ant-design/issues/13328
@@ -443,11 +433,7 @@ describe('TreeSelect.checkable', () => {
 
       wrapper.search('0-0-1');
       wrapper.selectNode(1);
-      expect(onChange).toHaveBeenCalledWith(
-        ['0-0-1'],
-        expect.anything(),
-        expect.anything(),
-      );
+      expect(onChange).toHaveBeenCalledWith(['0-0-1'], expect.anything(), expect.anything());
 
       expect(
         wrapper
@@ -615,14 +601,10 @@ describe('TreeSelect.checkable', () => {
       },
     ];
 
-    const wrapper = mount(
-      <TreeSelect defaultValue={['0-0']} treeData={treeData} treeCheckable />,
-    );
+    const wrapper = mount(<TreeSelect defaultValue={['0-0']} treeData={treeData} treeCheckable />);
 
     expect(wrapper.getSelection().length).toBeTruthy();
-    expect(
-      wrapper.find('.rc-tree-select-selection-item-remove').length,
-    ).toBeFalsy();
+    expect(wrapper.find('.rc-tree-select-selection-item-remove').length).toBeFalsy();
   });
 
   it('treeCheckStrictly can set halfChecked', () => {
@@ -634,26 +616,22 @@ describe('TreeSelect.checkable', () => {
         value={[{ value: 'half', halfChecked: true }]}
         open
         onChange={onChange}
-        treeData={[
-          { value: 'half', title: 'Half Check' },
-          { value: 'full', title: 'Full Check' },
-        ]}
+        treeData={[{ value: 'half', title: 'Half Check' }, { value: 'full', title: 'Full Check' }]}
       />,
     );
 
     function getTreeNode(index) {
-      return wrapper.find('.rc-tree-select-tree-treenode').at(index);
+      return wrapper
+        .find('.rc-tree-select-tree-treenode')
+        .not('[aria-hidden]')
+        .at(index);
     }
 
     expect(
-      getTreeNode(0).hasClass(
-        'rc-tree-select-tree-treenode-checkbox-indeterminate',
-      ),
+      getTreeNode(0).hasClass('rc-tree-select-tree-treenode-checkbox-indeterminate'),
     ).toBeTruthy();
     expect(
-      getTreeNode(1).hasClass(
-        'rc-tree-select-tree-treenode-checkbox-indeterminate',
-      ),
+      getTreeNode(1).hasClass('rc-tree-select-tree-treenode-checkbox-indeterminate'),
     ).toBeFalsy();
 
     wrapper.selectNode(1);
diff --git a/tests/Select.spec.js b/tests/Select.spec.js
index a5ad656f..806c8753 100644
--- a/tests/Select.spec.js
+++ b/tests/Select.spec.js
@@ -313,6 +313,7 @@ describe('TreeSelect.basic', () => {
     expect(
       wrapper
         .find('.rc-tree-select-tree-treenode')
+        .not('[aria-hidden]')
         .at(1)
         .hasClass('rc-tree-select-tree-treenode-switcher-open'),
     ).toBeTruthy();
diff --git a/tests/__snapshots__/Select.checkable.spec.js.snap b/tests/__snapshots__/Select.checkable.spec.js.snap
index 205a8e54..cb461788 100644
--- a/tests/__snapshots__/Select.checkable.spec.js.snap
+++ b/tests/__snapshots__/Select.checkable.spec.js.snap
@@ -8,94 +8,118 @@ exports[`TreeSelect.checkable uncheck remove by selector not treeCheckStrictly 1
     <div
       class="rc-tree-select-selector"
     >
-      <span
-        class="rc-tree-select-selection-item"
+      <div
+        class="rc-tree-select-selection-overflow"
       >
-        <span
-          class="rc-tree-select-selection-item-content"
-        >
-          0
-        </span>
-        <span
-          aria-hidden="true"
-          class="rc-tree-select-selection-item-remove"
-          style="user-select: none;"
-          unselectable="on"
+        <div
+          class="rc-tree-select-selection-overflow-item"
+          style="opacity: 1;"
         >
           <span
-            class="rc-tree-select-selection-item-remove-icon"
+            class="rc-tree-select-selection-item"
           >
-            ×
+            <span
+              class="rc-tree-select-selection-item-content"
+            >
+              0
+            </span>
+            <span
+              aria-hidden="true"
+              class="rc-tree-select-selection-item-remove"
+              style="user-select: none;"
+              unselectable="on"
+            >
+              <span
+                class="rc-tree-select-selection-item-remove-icon"
+              >
+                ×
+              </span>
+            </span>
           </span>
-        </span>
-      </span>
-      <span
-        class="rc-tree-select-selection-item"
-      >
-        <span
-          class="rc-tree-select-selection-item-content"
-        >
-          0-0
-        </span>
-        <span
-          aria-hidden="true"
-          class="rc-tree-select-selection-item-remove"
-          style="user-select: none;"
-          unselectable="on"
+        </div>
+        <div
+          class="rc-tree-select-selection-overflow-item"
+          style="opacity: 1;"
         >
           <span
-            class="rc-tree-select-selection-item-remove-icon"
+            class="rc-tree-select-selection-item"
           >
-            ×
+            <span
+              class="rc-tree-select-selection-item-content"
+            >
+              0-0
+            </span>
+            <span
+              aria-hidden="true"
+              class="rc-tree-select-selection-item-remove"
+              style="user-select: none;"
+              unselectable="on"
+            >
+              <span
+                class="rc-tree-select-selection-item-remove-icon"
+              >
+                ×
+              </span>
+            </span>
           </span>
-        </span>
-      </span>
-      <span
-        class="rc-tree-select-selection-item"
-      >
-        <span
-          class="rc-tree-select-selection-item-content"
-        >
-          0-0-0
-        </span>
-        <span
-          aria-hidden="true"
-          class="rc-tree-select-selection-item-remove"
-          style="user-select: none;"
-          unselectable="on"
+        </div>
+        <div
+          class="rc-tree-select-selection-overflow-item"
+          style="opacity: 1;"
         >
           <span
-            class="rc-tree-select-selection-item-remove-icon"
+            class="rc-tree-select-selection-item"
           >
-            ×
+            <span
+              class="rc-tree-select-selection-item-content"
+            >
+              0-0-0
+            </span>
+            <span
+              aria-hidden="true"
+              class="rc-tree-select-selection-item-remove"
+              style="user-select: none;"
+              unselectable="on"
+            >
+              <span
+                class="rc-tree-select-selection-item-remove-icon"
+              >
+                ×
+              </span>
+            </span>
           </span>
-        </span>
-      </span>
-      <span
-        class="rc-tree-select-selection-search"
-        style="width: 0px;"
-      >
-        <input
-          aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
-          aria-autocomplete="list"
-          aria-controls="rc_select_TEST_OR_SSR_list"
-          aria-expanded="true"
-          aria-haspopup="listbox"
-          aria-owns="rc_select_TEST_OR_SSR_list"
-          autocomplete="off"
-          class="rc-tree-select-selection-search-input"
-          id="rc_select_TEST_OR_SSR"
-          role="combobox"
-          type="search"
-          value=""
-        />
-        <span
-          aria-hidden="true"
-          class="rc-tree-select-selection-search-mirror"
+        </div>
+        <div
+          class="rc-tree-select-selection-overflow-item rc-tree-select-selection-overflow-item-suffix"
+          style="opacity: 1;"
         >
-           
-        </span>
-      </span>
+          <div
+            class="rc-tree-select-selection-search"
+            style="width: 0px;"
+          >
+            <input
+              aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
+              aria-autocomplete="list"
+              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-expanded="true"
+              aria-haspopup="listbox"
+              aria-owns="rc_select_TEST_OR_SSR_list"
+              autocomplete="off"
+              class="rc-tree-select-selection-search-input"
+              id="rc_select_TEST_OR_SSR"
+              role="combobox"
+              type="search"
+              value=""
+            />
+            <span
+              aria-hidden="true"
+              class="rc-tree-select-selection-search-mirror"
+            >
+               
+            </span>
+          </div>
+        </div>
+      </div>
     </div>
     <div>
       <div
@@ -116,6 +140,19 @@ exports[`TreeSelect.checkable uncheck remove by selector not treeCheckStrictly 1
                   value=""
                 />
               </div>
+              <div
+                aria-hidden="true"
+                class="rc-tree-select-tree-treenode"
+                style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+              >
+                <div
+                  class="rc-tree-select-tree-indent"
+                >
+                  <div
+                    class="rc-tree-select-tree-indent-unit"
+                  />
+                </div>
+              </div>
               <div
                 class="rc-tree-select-tree-list"
                 style="height: 200px;"
@@ -128,6 +165,10 @@ exports[`TreeSelect.checkable uncheck remove by selector not treeCheckStrictly 1
                     <div
                       class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-checkbox-checked rc-tree-select-tree-treenode-leaf-last"
                     >
+                      <span
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
+                      />
                       <span
                         class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
                       />
@@ -233,31 +274,40 @@ exports[`TreeSelect.checkable uncheck remove by selector not treeCheckStrictly 2
     <div
       class="rc-tree-select-selector"
     >
-      <span
-        class="rc-tree-select-selection-search"
-        style="width: 0px;"
+      <div
+        class="rc-tree-select-selection-overflow"
       >
-        <input
-          aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
-          aria-autocomplete="list"
-          aria-controls="rc_select_TEST_OR_SSR_list"
-          aria-expanded="true"
-          aria-haspopup="listbox"
-          aria-owns="rc_select_TEST_OR_SSR_list"
-          autocomplete="off"
-          class="rc-tree-select-selection-search-input"
-          id="rc_select_TEST_OR_SSR"
-          role="combobox"
-          type="search"
-          value=""
-        />
-        <span
-          aria-hidden="true"
-          class="rc-tree-select-selection-search-mirror"
+        <div
+          class="rc-tree-select-selection-overflow-item rc-tree-select-selection-overflow-item-suffix"
+          style="opacity: 1;"
         >
-           
-        </span>
-      </span>
+          <div
+            class="rc-tree-select-selection-search"
+            style="width: 0px;"
+          >
+            <input
+              aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
+              aria-autocomplete="list"
+              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-expanded="true"
+              aria-haspopup="listbox"
+              aria-owns="rc_select_TEST_OR_SSR_list"
+              autocomplete="off"
+              class="rc-tree-select-selection-search-input"
+              id="rc_select_TEST_OR_SSR"
+              role="combobox"
+              type="search"
+              value=""
+            />
+            <span
+              aria-hidden="true"
+              class="rc-tree-select-selection-search-mirror"
+            >
+               
+            </span>
+          </div>
+        </div>
+      </div>
       <span
         class="rc-tree-select-selection-placeholder"
       />
@@ -281,6 +331,19 @@ exports[`TreeSelect.checkable uncheck remove by selector not treeCheckStrictly 2
                   value=""
                 />
               </div>
+              <div
+                aria-hidden="true"
+                class="rc-tree-select-tree-treenode"
+                style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+              >
+                <div
+                  class="rc-tree-select-tree-indent"
+                >
+                  <div
+                    class="rc-tree-select-tree-indent-unit"
+                  />
+                </div>
+              </div>
               <div
                 class="rc-tree-select-tree-list"
                 style="height: 200px;"
@@ -293,6 +356,10 @@ exports[`TreeSelect.checkable uncheck remove by selector not treeCheckStrictly 2
                     <div
                       class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
                     >
+                      <span
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
+                      />
                       <span
                         class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
                       />
@@ -398,94 +465,118 @@ exports[`TreeSelect.checkable uncheck remove by tree check 1`] = `
     <div
       class="rc-tree-select-selector"
     >
-      <span
-        class="rc-tree-select-selection-item"
+      <div
+        class="rc-tree-select-selection-overflow"
       >
-        <span
-          class="rc-tree-select-selection-item-content"
-        >
-          0
-        </span>
-        <span
-          aria-hidden="true"
-          class="rc-tree-select-selection-item-remove"
-          style="user-select: none;"
-          unselectable="on"
+        <div
+          class="rc-tree-select-selection-overflow-item"
+          style="opacity: 1;"
         >
           <span
-            class="rc-tree-select-selection-item-remove-icon"
+            class="rc-tree-select-selection-item"
           >
-            ×
+            <span
+              class="rc-tree-select-selection-item-content"
+            >
+              0
+            </span>
+            <span
+              aria-hidden="true"
+              class="rc-tree-select-selection-item-remove"
+              style="user-select: none;"
+              unselectable="on"
+            >
+              <span
+                class="rc-tree-select-selection-item-remove-icon"
+              >
+                ×
+              </span>
+            </span>
           </span>
-        </span>
-      </span>
-      <span
-        class="rc-tree-select-selection-item"
-      >
-        <span
-          class="rc-tree-select-selection-item-content"
-        >
-          0-0
-        </span>
-        <span
-          aria-hidden="true"
-          class="rc-tree-select-selection-item-remove"
-          style="user-select: none;"
-          unselectable="on"
+        </div>
+        <div
+          class="rc-tree-select-selection-overflow-item"
+          style="opacity: 1;"
         >
           <span
-            class="rc-tree-select-selection-item-remove-icon"
+            class="rc-tree-select-selection-item"
           >
-            ×
+            <span
+              class="rc-tree-select-selection-item-content"
+            >
+              0-0
+            </span>
+            <span
+              aria-hidden="true"
+              class="rc-tree-select-selection-item-remove"
+              style="user-select: none;"
+              unselectable="on"
+            >
+              <span
+                class="rc-tree-select-selection-item-remove-icon"
+              >
+                ×
+              </span>
+            </span>
           </span>
-        </span>
-      </span>
-      <span
-        class="rc-tree-select-selection-item"
-      >
-        <span
-          class="rc-tree-select-selection-item-content"
-        >
-          0-0-0
-        </span>
-        <span
-          aria-hidden="true"
-          class="rc-tree-select-selection-item-remove"
-          style="user-select: none;"
-          unselectable="on"
+        </div>
+        <div
+          class="rc-tree-select-selection-overflow-item"
+          style="opacity: 1;"
         >
           <span
-            class="rc-tree-select-selection-item-remove-icon"
+            class="rc-tree-select-selection-item"
           >
-            ×
+            <span
+              class="rc-tree-select-selection-item-content"
+            >
+              0-0-0
+            </span>
+            <span
+              aria-hidden="true"
+              class="rc-tree-select-selection-item-remove"
+              style="user-select: none;"
+              unselectable="on"
+            >
+              <span
+                class="rc-tree-select-selection-item-remove-icon"
+              >
+                ×
+              </span>
+            </span>
           </span>
-        </span>
-      </span>
-      <span
-        class="rc-tree-select-selection-search"
-        style="width: 0px;"
-      >
-        <input
-          aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
-          aria-autocomplete="list"
-          aria-controls="rc_select_TEST_OR_SSR_list"
-          aria-expanded="true"
-          aria-haspopup="listbox"
-          aria-owns="rc_select_TEST_OR_SSR_list"
-          autocomplete="off"
-          class="rc-tree-select-selection-search-input"
-          id="rc_select_TEST_OR_SSR"
-          role="combobox"
-          type="search"
-          value="0"
-        />
-        <span
-          aria-hidden="true"
-          class="rc-tree-select-selection-search-mirror"
+        </div>
+        <div
+          class="rc-tree-select-selection-overflow-item rc-tree-select-selection-overflow-item-suffix"
+          style="opacity: 1;"
         >
-          0 
-        </span>
-      </span>
+          <div
+            class="rc-tree-select-selection-search"
+            style="width: 0px;"
+          >
+            <input
+              aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
+              aria-autocomplete="list"
+              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-expanded="true"
+              aria-haspopup="listbox"
+              aria-owns="rc_select_TEST_OR_SSR_list"
+              autocomplete="off"
+              class="rc-tree-select-selection-search-input"
+              id="rc_select_TEST_OR_SSR"
+              role="combobox"
+              type="search"
+              value="0"
+            />
+            <span
+              aria-hidden="true"
+              class="rc-tree-select-selection-search-mirror"
+            >
+              0 
+            </span>
+          </div>
+        </div>
+      </div>
     </div>
     <div>
       <div
@@ -506,6 +597,19 @@ exports[`TreeSelect.checkable uncheck remove by tree check 1`] = `
                   value=""
                 />
               </div>
+              <div
+                aria-hidden="true"
+                class="rc-tree-select-tree-treenode"
+                style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+              >
+                <div
+                  class="rc-tree-select-tree-indent"
+                >
+                  <div
+                    class="rc-tree-select-tree-indent-unit"
+                  />
+                </div>
+              </div>
               <div
                 class="rc-tree-select-tree-list"
                 style="height: 200px;"
@@ -518,6 +622,10 @@ exports[`TreeSelect.checkable uncheck remove by tree check 1`] = `
                     <div
                       class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-checkbox-checked rc-tree-select-tree-treenode-leaf-last filter-node"
                     >
+                      <span
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
+                      />
                       <span
                         class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
                       />
@@ -623,31 +731,40 @@ exports[`TreeSelect.checkable uncheck remove by tree check 2`] = `
     <div
       class="rc-tree-select-selector"
     >
-      <span
-        class="rc-tree-select-selection-search"
-        style="width: 0px;"
+      <div
+        class="rc-tree-select-selection-overflow"
       >
-        <input
-          aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
-          aria-autocomplete="list"
-          aria-controls="rc_select_TEST_OR_SSR_list"
-          aria-expanded="true"
-          aria-haspopup="listbox"
-          aria-owns="rc_select_TEST_OR_SSR_list"
-          autocomplete="off"
-          class="rc-tree-select-selection-search-input"
-          id="rc_select_TEST_OR_SSR"
-          role="combobox"
-          type="search"
-          value="0"
-        />
-        <span
-          aria-hidden="true"
-          class="rc-tree-select-selection-search-mirror"
+        <div
+          class="rc-tree-select-selection-overflow-item rc-tree-select-selection-overflow-item-suffix"
+          style="opacity: 1;"
         >
-          0 
-        </span>
-      </span>
+          <div
+            class="rc-tree-select-selection-search"
+            style="width: 0px;"
+          >
+            <input
+              aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
+              aria-autocomplete="list"
+              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-expanded="true"
+              aria-haspopup="listbox"
+              aria-owns="rc_select_TEST_OR_SSR_list"
+              autocomplete="off"
+              class="rc-tree-select-selection-search-input"
+              id="rc_select_TEST_OR_SSR"
+              role="combobox"
+              type="search"
+              value="0"
+            />
+            <span
+              aria-hidden="true"
+              class="rc-tree-select-selection-search-mirror"
+            >
+              0 
+            </span>
+          </div>
+        </div>
+      </div>
     </div>
     <div>
       <div
@@ -668,6 +785,19 @@ exports[`TreeSelect.checkable uncheck remove by tree check 2`] = `
                   value=""
                 />
               </div>
+              <div
+                aria-hidden="true"
+                class="rc-tree-select-tree-treenode"
+                style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+              >
+                <div
+                  class="rc-tree-select-tree-indent"
+                >
+                  <div
+                    class="rc-tree-select-tree-indent-unit"
+                  />
+                </div>
+              </div>
               <div
                 class="rc-tree-select-tree-list"
                 style="height: 200px;"
@@ -680,6 +810,10 @@ exports[`TreeSelect.checkable uncheck remove by tree check 2`] = `
                     <div
                       class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last filter-node"
                     >
+                      <span
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
+                      />
                       <span
                         class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
                       />
diff --git a/tests/__snapshots__/Select.multiple.spec.js.snap b/tests/__snapshots__/Select.multiple.spec.js.snap
index 443c9cf8..329100c8 100644
--- a/tests/__snapshots__/Select.multiple.spec.js.snap
+++ b/tests/__snapshots__/Select.multiple.spec.js.snap
@@ -7,33 +7,42 @@ exports[`TreeSelect.multiple can hide search box by showSearch = false 1`] = `
   <div
     class="rc-tree-select-selector"
   >
-    <span
-      class="rc-tree-select-selection-search"
-      style="width: 0px;"
+    <div
+      class="rc-tree-select-selection-overflow"
     >
-      <input
-        aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
-        aria-autocomplete="list"
-        aria-controls="rc_select_TEST_OR_SSR_list"
-        aria-haspopup="listbox"
-        aria-owns="rc_select_TEST_OR_SSR_list"
-        autocomplete="off"
-        class="rc-tree-select-selection-search-input"
-        id="rc_select_TEST_OR_SSR"
-        readonly=""
-        role="combobox"
-        style="opacity: 0;"
-        type="search"
-        unselectable="on"
-        value=""
-      />
-      <span
-        aria-hidden="true"
-        class="rc-tree-select-selection-search-mirror"
+      <div
+        class="rc-tree-select-selection-overflow-item rc-tree-select-selection-overflow-item-suffix"
+        style="opacity: 1;"
       >
-         
-      </span>
-    </span>
+        <div
+          class="rc-tree-select-selection-search"
+          style="width: 0px;"
+        >
+          <input
+            aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
+            aria-autocomplete="list"
+            aria-controls="rc_select_TEST_OR_SSR_list"
+            aria-haspopup="listbox"
+            aria-owns="rc_select_TEST_OR_SSR_list"
+            autocomplete="off"
+            class="rc-tree-select-selection-search-input"
+            id="rc_select_TEST_OR_SSR"
+            readonly=""
+            role="combobox"
+            style="opacity: 0;"
+            type="search"
+            unselectable="on"
+            value=""
+          />
+          <span
+            aria-hidden="true"
+            class="rc-tree-select-selection-search-mirror"
+          >
+             
+          </span>
+        </div>
+      </div>
+    </div>
     <span
       class="rc-tree-select-selection-placeholder"
     />
diff --git a/tests/__snapshots__/Select.spec.js.snap b/tests/__snapshots__/Select.spec.js.snap
index 45fa7bfe..ebf8219d 100644
--- a/tests/__snapshots__/Select.spec.js.snap
+++ b/tests/__snapshots__/Select.spec.js.snap
@@ -51,6 +51,19 @@ exports[`TreeSelect.basic render renders TreeNode correctly 1`] = `
                 value=""
               />
             </div>
+            <div
+              aria-hidden="true"
+              class="rc-tree-select-tree-treenode"
+              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+            >
+              <div
+                class="rc-tree-select-tree-indent"
+              >
+                <div
+                  class="rc-tree-select-tree-indent-unit"
+                />
+              </div>
+            </div>
             <div
               class="rc-tree-select-tree-list"
               style="height: 200px;"
@@ -63,6 +76,10 @@ exports[`TreeSelect.basic render renders TreeNode correctly 1`] = `
                   <div
                     class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open"
                   >
+                    <span
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
+                    />
                     <span
                       class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
                     />
@@ -83,6 +100,10 @@ exports[`TreeSelect.basic render renders TreeNode correctly 1`] = `
                   <div
                     class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
                   >
+                    <span
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
+                    />
                     <span
                       class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
                     />
@@ -228,6 +249,19 @@ exports[`TreeSelect.basic render renders TreeNode correctly with falsy child 1`]
                 value=""
               />
             </div>
+            <div
+              aria-hidden="true"
+              class="rc-tree-select-tree-treenode"
+              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+            >
+              <div
+                class="rc-tree-select-tree-indent"
+              >
+                <div
+                  class="rc-tree-select-tree-indent-unit"
+                />
+              </div>
+            </div>
             <div
               class="rc-tree-select-tree-list"
               style="height: 200px;"
@@ -240,6 +274,10 @@ exports[`TreeSelect.basic render renders TreeNode correctly with falsy child 1`]
                   <div
                     class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open"
                   >
+                    <span
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
+                    />
                     <span
                       class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
                     />
@@ -260,6 +298,10 @@ exports[`TreeSelect.basic render renders TreeNode correctly with falsy child 1`]
                   <div
                     class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
                   >
+                    <span
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
+                    />
                     <span
                       class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
                     />
@@ -362,33 +404,42 @@ exports[`TreeSelect.basic render renders correctly 1`] = `
   <div
     class="awesome-selector"
   >
-    <span
-      class="awesome-selection-search"
-      style="width: 0px;"
+    <div
+      class="awesome-selection-overflow"
     >
-      <input
-        aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
-        aria-autocomplete="list"
-        aria-controls="rc_select_TEST_OR_SSR_list"
-        aria-haspopup="listbox"
-        aria-owns="rc_select_TEST_OR_SSR_list"
-        autocomplete="off"
-        class="awesome-selection-search-input"
-        id="rc_select_TEST_OR_SSR"
-        readonly=""
-        role="combobox"
-        style="opacity: 0;"
-        type="search"
-        unselectable="on"
-        value=""
-      />
-      <span
-        aria-hidden="true"
-        class="awesome-selection-search-mirror"
+      <div
+        class="awesome-selection-overflow-item awesome-selection-overflow-item-suffix"
+        style="opacity: 1;"
       >
-         
-      </span>
-    </span>
+        <div
+          class="awesome-selection-search"
+          style="width: 0px;"
+        >
+          <input
+            aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
+            aria-autocomplete="list"
+            aria-controls="rc_select_TEST_OR_SSR_list"
+            aria-haspopup="listbox"
+            aria-owns="rc_select_TEST_OR_SSR_list"
+            autocomplete="off"
+            class="awesome-selection-search-input"
+            id="rc_select_TEST_OR_SSR"
+            readonly=""
+            role="combobox"
+            style="opacity: 0;"
+            type="search"
+            unselectable="on"
+            value=""
+          />
+          <span
+            aria-hidden="true"
+            class="awesome-selection-search-mirror"
+          >
+             
+          </span>
+        </div>
+      </div>
+    </div>
     <span
       class="awesome-selection-placeholder"
     />
@@ -449,33 +500,42 @@ exports[`TreeSelect.basic render renders tree correctly 1`] = `
   <div
     class="rc-tree-select-selector"
   >
-    <span
-      class="rc-tree-select-selection-search"
-      style="width: 0px;"
+    <div
+      class="rc-tree-select-selection-overflow"
     >
-      <input
-        aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
-        aria-autocomplete="list"
-        aria-controls="rc_select_TEST_OR_SSR_list"
-        aria-haspopup="listbox"
-        aria-owns="rc_select_TEST_OR_SSR_list"
-        autocomplete="off"
-        class="rc-tree-select-selection-search-input"
-        id="rc_select_TEST_OR_SSR"
-        readonly=""
-        role="combobox"
-        style="opacity: 0;"
-        type="search"
-        unselectable="on"
-        value=""
-      />
-      <span
-        aria-hidden="true"
-        class="rc-tree-select-selection-search-mirror"
+      <div
+        class="rc-tree-select-selection-overflow-item rc-tree-select-selection-overflow-item-suffix"
+        style="opacity: 1;"
       >
-         
-      </span>
-    </span>
+        <div
+          class="rc-tree-select-selection-search"
+          style="width: 0px;"
+        >
+          <input
+            aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
+            aria-autocomplete="list"
+            aria-controls="rc_select_TEST_OR_SSR_list"
+            aria-haspopup="listbox"
+            aria-owns="rc_select_TEST_OR_SSR_list"
+            autocomplete="off"
+            class="rc-tree-select-selection-search-input"
+            id="rc_select_TEST_OR_SSR"
+            readonly=""
+            role="combobox"
+            style="opacity: 0;"
+            type="search"
+            unselectable="on"
+            value=""
+          />
+          <span
+            aria-hidden="true"
+            class="rc-tree-select-selection-search-mirror"
+          >
+             
+          </span>
+        </div>
+      </div>
+    </div>
     <span
       class="rc-tree-select-selection-placeholder"
     />
@@ -535,6 +595,19 @@ exports[`TreeSelect.basic render renders treeDataSimpleMode correctly 1`] = `
                   value=""
                 />
               </div>
+              <div
+                aria-hidden="true"
+                class="rc-tree-select-tree-treenode"
+                style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+              >
+                <div
+                  class="rc-tree-select-tree-indent"
+                >
+                  <div
+                    class="rc-tree-select-tree-indent-unit"
+                  />
+                </div>
+              </div>
               <div
                 class="rc-tree-select-tree-list"
                 style="height: 200px;"
@@ -547,6 +620,10 @@ exports[`TreeSelect.basic render renders treeDataSimpleMode correctly 1`] = `
                     <div
                       class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
                     >
+                      <span
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
+                      />
                       <span
                         class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
                       />
@@ -660,6 +737,19 @@ exports[`TreeSelect.basic search nodes check tree changed by filter 1`] = `
                   value=""
                 />
               </div>
+              <div
+                aria-hidden="true"
+                class="rc-tree-select-tree-treenode"
+                style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+              >
+                <div
+                  class="rc-tree-select-tree-indent"
+                >
+                  <div
+                    class="rc-tree-select-tree-indent-unit"
+                  />
+                </div>
+              </div>
               <div
                 class="rc-tree-select-tree-list"
                 style="height: 200px;"
@@ -672,6 +762,10 @@ exports[`TreeSelect.basic search nodes check tree changed by filter 1`] = `
                     <div
                       class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last filter-node"
                     >
+                      <span
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
+                      />
                       <span
                         class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
                       />
@@ -760,6 +854,19 @@ exports[`TreeSelect.basic search nodes check tree changed by filter 2`] = `
                   value=""
                 />
               </div>
+              <div
+                aria-hidden="true"
+                class="rc-tree-select-tree-treenode"
+                style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+              >
+                <div
+                  class="rc-tree-select-tree-indent"
+                >
+                  <div
+                    class="rc-tree-select-tree-indent-unit"
+                  />
+                </div>
+              </div>
               <div
                 class="rc-tree-select-tree-list"
                 style="height: 200px;"
@@ -772,6 +879,10 @@ exports[`TreeSelect.basic search nodes check tree changed by filter 2`] = `
                     <div
                       class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open"
                     >
+                      <span
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
+                      />
                       <span
                         class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
                       />
@@ -792,6 +903,10 @@ exports[`TreeSelect.basic search nodes check tree changed by filter 2`] = `
                     <div
                       class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-leaf-last"
                     >
+                      <span
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
+                      />
                       <span
                         class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
                       />
@@ -877,6 +992,19 @@ exports[`TreeSelect.basic search nodes filter node but not remove then 1`] = `
                   value=""
                 />
               </div>
+              <div
+                aria-hidden="true"
+                class="rc-tree-select-tree-treenode"
+                style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+              >
+                <div
+                  class="rc-tree-select-tree-indent"
+                >
+                  <div
+                    class="rc-tree-select-tree-indent-unit"
+                  />
+                </div>
+              </div>
               <div
                 class="rc-tree-select-tree-list"
                 style="height: 200px;"
@@ -889,6 +1017,10 @@ exports[`TreeSelect.basic search nodes filter node but not remove then 1`] = `
                     <div
                       class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open filter-node"
                     >
+                      <span
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
+                      />
                       <span
                         class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
                       />
@@ -909,6 +1041,10 @@ exports[`TreeSelect.basic search nodes filter node but not remove then 1`] = `
                     <div
                       class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
                     >
+                      <span
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
+                      />
                       <span
                         class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
                       />
@@ -996,6 +1132,19 @@ exports[`TreeSelect.basic search nodes renders search input 1`] = `
                 value=""
               />
             </div>
+            <div
+              aria-hidden="true"
+              class="rc-tree-select-tree-treenode"
+              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
+            >
+              <div
+                class="rc-tree-select-tree-indent"
+              >
+                <div
+                  class="rc-tree-select-tree-indent-unit"
+                />
+              </div>
+            </div>
             <div
               class="rc-tree-select-tree-list"
               style="height: 200px;"
@@ -1008,6 +1157,10 @@ exports[`TreeSelect.basic search nodes renders search input 1`] = `
                   <div
                     class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close"
                   >
+                    <span
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
+                    />
                     <span
                       class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
                     />
@@ -1028,6 +1181,10 @@ exports[`TreeSelect.basic search nodes renders search input 1`] = `
                   <div
                     class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-leaf-last"
                   >
+                    <span
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
+                    />
                     <span
                       class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
                     />