From da3cd0bf182c1a23b1edb0dd3502c22e5cb2a873 Mon Sep 17 00:00:00 2001
From: Wanpan <wanpan96@163.com>
Date: Tue, 23 Apr 2024 19:41:03 +0800
Subject: [PATCH] test: fix onPopupScroll evt is null

---
 examples/basic.tsx                            |   1 -
 tests/Select.props.spec.js                    |   5 +-
 .../Select.checkable.spec.tsx.snap            | 644 +++++++-------
 tests/__snapshots__/Select.spec.tsx.snap      | 787 +++++++++---------
 4 files changed, 747 insertions(+), 690 deletions(-)

diff --git a/examples/basic.tsx b/examples/basic.tsx
index 2587f0b8..71dfb35b 100644
--- a/examples/basic.tsx
+++ b/examples/basic.tsx
@@ -427,7 +427,6 @@ class Demo extends React.Component {
             <TreeNode value="Value 3-2" title="Title 3-2" />
           </TreeNode>
         </TreeSelect>
-        ,
       </div>
     );
   }
diff --git a/tests/Select.props.spec.js b/tests/Select.props.spec.js
index 83c3e96e..d9b40225 100644
--- a/tests/Select.props.spec.js
+++ b/tests/Select.props.spec.js
@@ -244,7 +244,10 @@ describe('TreeSelect.props', () => {
   });
 
   it('onPopupScroll', async () => {
-    const onPopupScroll = jest.fn();
+    const onPopupScroll = jest.fn(e => {
+      // Prevents React from resetting its properties:
+      e.persist();
+    });
     render(
       <TreeSelect
         open
diff --git a/tests/__snapshots__/Select.checkable.spec.tsx.snap b/tests/__snapshots__/Select.checkable.spec.tsx.snap
index fb5d0b12..f0ede9b7 100644
--- a/tests/__snapshots__/Select.checkable.spec.tsx.snap
+++ b/tests/__snapshots__/Select.checkable.spec.tsx.snap
@@ -157,110 +157,115 @@ exports[`TreeSelect.checkable uncheck remove by selector not treeCheckStrictly 1
             </div>
             <div
               class="rc-tree-select-tree-list"
-              style="height: 200px;"
+              style="position: relative;"
             >
-              <div>
-                <div
-                  class="rc-tree-select-tree-list-holder-inner"
-                  style="display: flex; flex-direction: column;"
-                >
+              <div
+                class="rc-tree-select-tree-list-holder"
+                style="max-height: 200px; overflow-y: auto;"
+              >
+                <div>
                   <div
-                    aria-grabbed="false"
-                    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"
-                    draggable="false"
+                    class="rc-tree-select-tree-list-holder-inner"
+                    style="display: flex; flex-direction: column;"
                   >
-                    <span
-                      aria-hidden="true"
-                      class="rc-tree-select-tree-indent"
-                    />
-                    <span
-                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
-                    />
-                    <span
-                      class="rc-tree-select-tree-checkbox rc-tree-select-tree-checkbox-checked"
-                    />
-                    <span
-                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
-                      title="0"
+                    <div
+                      aria-grabbed="false"
+                      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"
+                      draggable="false"
                     >
                       <span
-                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
                       />
                       <span
-                        class="rc-tree-select-tree-title"
+                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
+                      />
+                      <span
+                        class="rc-tree-select-tree-checkbox rc-tree-select-tree-checkbox-checked"
+                      />
+                      <span
+                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
+                        title="0"
                       >
-                        0
+                        <span
+                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
+                        />
+                        <span
+                          class="rc-tree-select-tree-title"
+                        >
+                          0
+                        </span>
                       </span>
-                    </span>
-                  </div>
-                  <div
-                    aria-grabbed="false"
-                    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"
-                    draggable="false"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="rc-tree-select-tree-indent"
+                    </div>
+                    <div
+                      aria-grabbed="false"
+                      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"
+                      draggable="false"
                     >
                       <span
-                        class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
+                      >
+                        <span
+                          class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
+                        />
+                      </span>
+                      <span
+                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
                       />
-                    </span>
-                    <span
-                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
-                    />
-                    <span
-                      class="rc-tree-select-tree-checkbox rc-tree-select-tree-checkbox-checked"
-                    />
-                    <span
-                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
-                      title="0-0"
-                    >
                       <span
-                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
+                        class="rc-tree-select-tree-checkbox rc-tree-select-tree-checkbox-checked"
                       />
                       <span
-                        class="rc-tree-select-tree-title"
+                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
+                        title="0-0"
                       >
-                        0-0
+                        <span
+                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
+                        />
+                        <span
+                          class="rc-tree-select-tree-title"
+                        >
+                          0-0
+                        </span>
                       </span>
-                    </span>
-                  </div>
-                  <div
-                    aria-grabbed="false"
-                    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"
-                    draggable="false"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="rc-tree-select-tree-indent"
+                    </div>
+                    <div
+                      aria-grabbed="false"
+                      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"
+                      draggable="false"
                     >
                       <span
-                        class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
-                      />
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
+                      >
+                        <span
+                          class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
+                        />
+                        <span
+                          class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
+                        />
+                      </span>
                       <span
-                        class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
+                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
                       />
-                    </span>
-                    <span
-                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
-                    />
-                    <span
-                      class="rc-tree-select-tree-checkbox rc-tree-select-tree-checkbox-checked"
-                    />
-                    <span
-                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                      title="0-0-0"
-                    >
                       <span
-                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                        class="rc-tree-select-tree-checkbox rc-tree-select-tree-checkbox-checked"
                       />
                       <span
-                        class="rc-tree-select-tree-title"
+                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
+                        title="0-0-0"
                       >
-                        0-0-0
+                        <span
+                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                        />
+                        <span
+                          class="rc-tree-select-tree-title"
+                        >
+                          0-0-0
+                        </span>
                       </span>
-                    </span>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -352,110 +357,115 @@ exports[`TreeSelect.checkable uncheck remove by selector not treeCheckStrictly 2
             </div>
             <div
               class="rc-tree-select-tree-list"
-              style="height: 200px;"
+              style="position: relative;"
             >
-              <div>
-                <div
-                  class="rc-tree-select-tree-list-holder-inner"
-                  style="display: flex; flex-direction: column;"
-                >
+              <div
+                class="rc-tree-select-tree-list-holder"
+                style="max-height: 200px; overflow-y: auto;"
+              >
+                <div>
                   <div
-                    aria-grabbed="false"
-                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
-                    draggable="false"
+                    class="rc-tree-select-tree-list-holder-inner"
+                    style="display: flex; flex-direction: column;"
                   >
-                    <span
-                      aria-hidden="true"
-                      class="rc-tree-select-tree-indent"
-                    />
-                    <span
-                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
-                    />
-                    <span
-                      class="rc-tree-select-tree-checkbox"
-                    />
-                    <span
-                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
-                      title="0"
+                    <div
+                      aria-grabbed="false"
+                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
+                      draggable="false"
                     >
                       <span
-                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
                       />
                       <span
-                        class="rc-tree-select-tree-title"
+                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
+                      />
+                      <span
+                        class="rc-tree-select-tree-checkbox"
+                      />
+                      <span
+                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
+                        title="0"
                       >
-                        0
+                        <span
+                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
+                        />
+                        <span
+                          class="rc-tree-select-tree-title"
+                        >
+                          0
+                        </span>
                       </span>
-                    </span>
-                  </div>
-                  <div
-                    aria-grabbed="false"
-                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
-                    draggable="false"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="rc-tree-select-tree-indent"
+                    </div>
+                    <div
+                      aria-grabbed="false"
+                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
+                      draggable="false"
                     >
                       <span
-                        class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
+                      >
+                        <span
+                          class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
+                        />
+                      </span>
+                      <span
+                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
                       />
-                    </span>
-                    <span
-                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
-                    />
-                    <span
-                      class="rc-tree-select-tree-checkbox"
-                    />
-                    <span
-                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
-                      title="0-0"
-                    >
                       <span
-                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
+                        class="rc-tree-select-tree-checkbox"
                       />
                       <span
-                        class="rc-tree-select-tree-title"
+                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
+                        title="0-0"
                       >
-                        0-0
+                        <span
+                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
+                        />
+                        <span
+                          class="rc-tree-select-tree-title"
+                        >
+                          0-0
+                        </span>
                       </span>
-                    </span>
-                  </div>
-                  <div
-                    aria-grabbed="false"
-                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
-                    draggable="false"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="rc-tree-select-tree-indent"
+                    </div>
+                    <div
+                      aria-grabbed="false"
+                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
+                      draggable="false"
                     >
                       <span
-                        class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
-                      />
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
+                      >
+                        <span
+                          class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
+                        />
+                        <span
+                          class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
+                        />
+                      </span>
                       <span
-                        class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
+                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
                       />
-                    </span>
-                    <span
-                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
-                    />
-                    <span
-                      class="rc-tree-select-tree-checkbox"
-                    />
-                    <span
-                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                      title="0-0-0"
-                    >
                       <span
-                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                        class="rc-tree-select-tree-checkbox"
                       />
                       <span
-                        class="rc-tree-select-tree-title"
+                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
+                        title="0-0-0"
                       >
-                        0-0-0
+                        <span
+                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                        />
+                        <span
+                          class="rc-tree-select-tree-title"
+                        >
+                          0-0-0
+                        </span>
                       </span>
-                    </span>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -625,110 +635,115 @@ exports[`TreeSelect.checkable uncheck remove by tree check 1`] = `
             </div>
             <div
               class="rc-tree-select-tree-list"
-              style="height: 200px;"
+              style="position: relative;"
             >
-              <div>
-                <div
-                  class="rc-tree-select-tree-list-holder-inner"
-                  style="display: flex; flex-direction: column;"
-                >
+              <div
+                class="rc-tree-select-tree-list-holder"
+                style="max-height: 200px; overflow-y: auto;"
+              >
+                <div>
                   <div
-                    aria-grabbed="false"
-                    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"
-                    draggable="false"
+                    class="rc-tree-select-tree-list-holder-inner"
+                    style="display: flex; flex-direction: column;"
                   >
-                    <span
-                      aria-hidden="true"
-                      class="rc-tree-select-tree-indent"
-                    />
-                    <span
-                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
-                    />
-                    <span
-                      class="rc-tree-select-tree-checkbox rc-tree-select-tree-checkbox-checked"
-                    />
-                    <span
-                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
-                      title="0"
+                    <div
+                      aria-grabbed="false"
+                      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"
+                      draggable="false"
                     >
                       <span
-                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
                       />
                       <span
-                        class="rc-tree-select-tree-title"
+                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
+                      />
+                      <span
+                        class="rc-tree-select-tree-checkbox rc-tree-select-tree-checkbox-checked"
+                      />
+                      <span
+                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
+                        title="0"
                       >
-                        0
+                        <span
+                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
+                        />
+                        <span
+                          class="rc-tree-select-tree-title"
+                        >
+                          0
+                        </span>
                       </span>
-                    </span>
-                  </div>
-                  <div
-                    aria-grabbed="false"
-                    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"
-                    draggable="false"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="rc-tree-select-tree-indent"
+                    </div>
+                    <div
+                      aria-grabbed="false"
+                      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"
+                      draggable="false"
                     >
                       <span
-                        class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
+                      >
+                        <span
+                          class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
+                        />
+                      </span>
+                      <span
+                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
                       />
-                    </span>
-                    <span
-                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
-                    />
-                    <span
-                      class="rc-tree-select-tree-checkbox rc-tree-select-tree-checkbox-checked"
-                    />
-                    <span
-                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
-                      title="0-0"
-                    >
                       <span
-                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
+                        class="rc-tree-select-tree-checkbox rc-tree-select-tree-checkbox-checked"
                       />
                       <span
-                        class="rc-tree-select-tree-title"
+                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
+                        title="0-0"
                       >
-                        0-0
+                        <span
+                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
+                        />
+                        <span
+                          class="rc-tree-select-tree-title"
+                        >
+                          0-0
+                        </span>
                       </span>
-                    </span>
-                  </div>
-                  <div
-                    aria-grabbed="false"
-                    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"
-                    draggable="false"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="rc-tree-select-tree-indent"
+                    </div>
+                    <div
+                      aria-grabbed="false"
+                      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"
+                      draggable="false"
                     >
                       <span
-                        class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
-                      />
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
+                      >
+                        <span
+                          class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
+                        />
+                        <span
+                          class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
+                        />
+                      </span>
                       <span
-                        class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
+                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
                       />
-                    </span>
-                    <span
-                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
-                    />
-                    <span
-                      class="rc-tree-select-tree-checkbox rc-tree-select-tree-checkbox-checked"
-                    />
-                    <span
-                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                      title="0-0-0"
-                    >
                       <span
-                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                        class="rc-tree-select-tree-checkbox rc-tree-select-tree-checkbox-checked"
                       />
                       <span
-                        class="rc-tree-select-tree-title"
+                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
+                        title="0-0-0"
                       >
-                        0-0-0
+                        <span
+                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                        />
+                        <span
+                          class="rc-tree-select-tree-title"
+                        >
+                          0-0-0
+                        </span>
                       </span>
-                    </span>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -817,110 +832,115 @@ exports[`TreeSelect.checkable uncheck remove by tree check 2`] = `
             </div>
             <div
               class="rc-tree-select-tree-list"
-              style="height: 200px;"
+              style="position: relative;"
             >
-              <div>
-                <div
-                  class="rc-tree-select-tree-list-holder-inner"
-                  style="display: flex; flex-direction: column;"
-                >
+              <div
+                class="rc-tree-select-tree-list-holder"
+                style="max-height: 200px; overflow-y: auto;"
+              >
+                <div>
                   <div
-                    aria-grabbed="false"
-                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last filter-node"
-                    draggable="false"
+                    class="rc-tree-select-tree-list-holder-inner"
+                    style="display: flex; flex-direction: column;"
                   >
-                    <span
-                      aria-hidden="true"
-                      class="rc-tree-select-tree-indent"
-                    />
-                    <span
-                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
-                    />
-                    <span
-                      class="rc-tree-select-tree-checkbox"
-                    />
-                    <span
-                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
-                      title="0"
+                    <div
+                      aria-grabbed="false"
+                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last filter-node"
+                      draggable="false"
                     >
                       <span
-                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
                       />
                       <span
-                        class="rc-tree-select-tree-title"
+                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
+                      />
+                      <span
+                        class="rc-tree-select-tree-checkbox"
+                      />
+                      <span
+                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
+                        title="0"
                       >
-                        0
+                        <span
+                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
+                        />
+                        <span
+                          class="rc-tree-select-tree-title"
+                        >
+                          0
+                        </span>
                       </span>
-                    </span>
-                  </div>
-                  <div
-                    aria-grabbed="false"
-                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last filter-node"
-                    draggable="false"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="rc-tree-select-tree-indent"
+                    </div>
+                    <div
+                      aria-grabbed="false"
+                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last filter-node"
+                      draggable="false"
                     >
                       <span
-                        class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
+                      >
+                        <span
+                          class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
+                        />
+                      </span>
+                      <span
+                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
                       />
-                    </span>
-                    <span
-                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
-                    />
-                    <span
-                      class="rc-tree-select-tree-checkbox"
-                    />
-                    <span
-                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
-                      title="0-0"
-                    >
                       <span
-                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
+                        class="rc-tree-select-tree-checkbox"
                       />
                       <span
-                        class="rc-tree-select-tree-title"
+                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
+                        title="0-0"
                       >
-                        0-0
+                        <span
+                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
+                        />
+                        <span
+                          class="rc-tree-select-tree-title"
+                        >
+                          0-0
+                        </span>
                       </span>
-                    </span>
-                  </div>
-                  <div
-                    aria-grabbed="false"
-                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last filter-node"
-                    draggable="false"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="rc-tree-select-tree-indent"
+                    </div>
+                    <div
+                      aria-grabbed="false"
+                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last filter-node"
+                      draggable="false"
                     >
                       <span
-                        class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
-                      />
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
+                      >
+                        <span
+                          class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
+                        />
+                        <span
+                          class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
+                        />
+                      </span>
                       <span
-                        class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
+                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
                       />
-                    </span>
-                    <span
-                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
-                    />
-                    <span
-                      class="rc-tree-select-tree-checkbox"
-                    />
-                    <span
-                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                      title="0-0-0"
-                    >
                       <span
-                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                        class="rc-tree-select-tree-checkbox"
                       />
                       <span
-                        class="rc-tree-select-tree-title"
+                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
+                        title="0-0-0"
                       >
-                        0-0-0
+                        <span
+                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                        />
+                        <span
+                          class="rc-tree-select-tree-title"
+                        >
+                          0-0-0
+                        </span>
                       </span>
-                    </span>
+                    </div>
                   </div>
                 </div>
               </div>
diff --git a/tests/__snapshots__/Select.spec.tsx.snap b/tests/__snapshots__/Select.spec.tsx.snap
index 1e449191..8b0c118a 100644
--- a/tests/__snapshots__/Select.spec.tsx.snap
+++ b/tests/__snapshots__/Select.spec.tsx.snap
@@ -64,124 +64,129 @@ exports[`TreeSelect.basic render renders TreeNode correctly 1`] = `
           </div>
           <div
             class="rc-tree-select-tree-list"
-            style="height: 200px;"
+            style="position: relative;"
           >
-            <div>
-              <div
-                class="rc-tree-select-tree-list-holder-inner"
-                style="display: flex; flex-direction: column;"
-              >
+            <div
+              class="rc-tree-select-tree-list-holder"
+              style="max-height: 200px; overflow-y: auto;"
+            >
+              <div>
                 <div
-                  aria-grabbed="false"
-                  class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open"
-                  draggable="false"
+                  class="rc-tree-select-tree-list-holder-inner"
+                  style="display: flex; flex-direction: column;"
                 >
-                  <span
-                    aria-hidden="true"
-                    class="rc-tree-select-tree-indent"
-                  />
-                  <span
-                    class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
-                  />
-                  <span
-                    class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                    title="0 label"
+                  <div
+                    aria-grabbed="false"
+                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open"
+                    draggable="false"
                   >
                     <span
-                      class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
+                    />
+                    <span
+                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
                     />
                     <span
-                      class="rc-tree-select-tree-title"
+                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
+                      title="0 label"
                     >
-                      0 label
+                      <span
+                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                      />
+                      <span
+                        class="rc-tree-select-tree-title"
+                      >
+                        0 label
+                      </span>
                     </span>
-                  </span>
-                </div>
-                <div
-                  aria-grabbed="false"
-                  class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
-                  draggable="false"
-                >
-                  <span
-                    aria-hidden="true"
-                    class="rc-tree-select-tree-indent"
-                  />
-                  <span
-                    class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
-                  />
-                  <span
-                    class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
-                    title="1 label"
+                  </div>
+                  <div
+                    aria-grabbed="false"
+                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
+                    draggable="false"
                   >
                     <span
-                      class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
+                    />
+                    <span
+                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
                     />
                     <span
-                      class="rc-tree-select-tree-title"
+                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
+                      title="1 label"
                     >
-                      1 label
+                      <span
+                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
+                      />
+                      <span
+                        class="rc-tree-select-tree-title"
+                      >
+                        1 label
+                      </span>
                     </span>
-                  </span>
-                </div>
-                <div
-                  aria-grabbed="false"
-                  class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open"
-                  draggable="false"
-                >
-                  <span
-                    aria-hidden="true"
-                    class="rc-tree-select-tree-indent"
+                  </div>
+                  <div
+                    aria-grabbed="false"
+                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open"
+                    draggable="false"
                   >
                     <span
-                      class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-end"
-                    />
-                  </span>
-                  <span
-                    class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
-                  />
-                  <span
-                    class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                    title="10 label"
-                  >
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
+                    >
+                      <span
+                        class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-end"
+                      />
+                    </span>
                     <span
-                      class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
                     />
                     <span
-                      class="rc-tree-select-tree-title"
+                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
+                      title="10 label"
                     >
-                      10 label
+                      <span
+                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                      />
+                      <span
+                        class="rc-tree-select-tree-title"
+                      >
+                        10 label
+                      </span>
                     </span>
-                  </span>
-                </div>
-                <div
-                  aria-grabbed="false"
-                  class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
-                  draggable="false"
-                >
-                  <span
-                    aria-hidden="true"
-                    class="rc-tree-select-tree-indent"
+                  </div>
+                  <div
+                    aria-grabbed="false"
+                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
+                    draggable="false"
                   >
                     <span
-                      class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-end"
-                    />
-                  </span>
-                  <span
-                    class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
-                  />
-                  <span
-                    class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                    title="11 label"
-                  >
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
+                    >
+                      <span
+                        class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-end"
+                      />
+                    </span>
                     <span
-                      class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
                     />
                     <span
-                      class="rc-tree-select-tree-title"
+                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
+                      title="11 label"
                     >
-                      11 label
+                      <span
+                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                      />
+                      <span
+                        class="rc-tree-select-tree-title"
+                      >
+                        11 label
+                      </span>
                     </span>
-                  </span>
+                  </div>
                 </div>
               </div>
             </div>
@@ -257,124 +262,129 @@ exports[`TreeSelect.basic render renders TreeNode correctly with falsy child 1`]
           </div>
           <div
             class="rc-tree-select-tree-list"
-            style="height: 200px;"
+            style="position: relative;"
           >
-            <div>
-              <div
-                class="rc-tree-select-tree-list-holder-inner"
-                style="display: flex; flex-direction: column;"
-              >
+            <div
+              class="rc-tree-select-tree-list-holder"
+              style="max-height: 200px; overflow-y: auto;"
+            >
+              <div>
                 <div
-                  aria-grabbed="false"
-                  class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open"
-                  draggable="false"
+                  class="rc-tree-select-tree-list-holder-inner"
+                  style="display: flex; flex-direction: column;"
                 >
-                  <span
-                    aria-hidden="true"
-                    class="rc-tree-select-tree-indent"
-                  />
-                  <span
-                    class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
-                  />
-                  <span
-                    class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                    title="0 label"
+                  <div
+                    aria-grabbed="false"
+                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open"
+                    draggable="false"
                   >
                     <span
-                      class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
+                    />
+                    <span
+                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
                     />
                     <span
-                      class="rc-tree-select-tree-title"
+                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
+                      title="0 label"
                     >
-                      0 label
+                      <span
+                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                      />
+                      <span
+                        class="rc-tree-select-tree-title"
+                      >
+                        0 label
+                      </span>
                     </span>
-                  </span>
-                </div>
-                <div
-                  aria-grabbed="false"
-                  class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
-                  draggable="false"
-                >
-                  <span
-                    aria-hidden="true"
-                    class="rc-tree-select-tree-indent"
-                  />
-                  <span
-                    class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
-                  />
-                  <span
-                    class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
-                    title="1 label"
+                  </div>
+                  <div
+                    aria-grabbed="false"
+                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
+                    draggable="false"
                   >
                     <span
-                      class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
                     />
                     <span
-                      class="rc-tree-select-tree-title"
+                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
+                    />
+                    <span
+                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
+                      title="1 label"
                     >
-                      1 label
+                      <span
+                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
+                      />
+                      <span
+                        class="rc-tree-select-tree-title"
+                      >
+                        1 label
+                      </span>
                     </span>
-                  </span>
-                </div>
-                <div
-                  aria-grabbed="false"
-                  class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open"
-                  draggable="false"
-                >
-                  <span
-                    aria-hidden="true"
-                    class="rc-tree-select-tree-indent"
+                  </div>
+                  <div
+                    aria-grabbed="false"
+                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open"
+                    draggable="false"
                   >
                     <span
-                      class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-end"
-                    />
-                  </span>
-                  <span
-                    class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
-                  />
-                  <span
-                    class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                    title="10 label"
-                  >
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
+                    >
+                      <span
+                        class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-end"
+                      />
+                    </span>
                     <span
-                      class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
                     />
                     <span
-                      class="rc-tree-select-tree-title"
+                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
+                      title="10 label"
                     >
-                      10 label
+                      <span
+                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                      />
+                      <span
+                        class="rc-tree-select-tree-title"
+                      >
+                        10 label
+                      </span>
                     </span>
-                  </span>
-                </div>
-                <div
-                  aria-grabbed="false"
-                  class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
-                  draggable="false"
-                >
-                  <span
-                    aria-hidden="true"
-                    class="rc-tree-select-tree-indent"
+                  </div>
+                  <div
+                    aria-grabbed="false"
+                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
+                    draggable="false"
                   >
                     <span
-                      class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-end"
-                    />
-                  </span>
-                  <span
-                    class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
-                  />
-                  <span
-                    class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                    title="11 label"
-                  >
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
+                    >
+                      <span
+                        class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-end"
+                      />
+                    </span>
                     <span
-                      class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
                     />
                     <span
-                      class="rc-tree-select-tree-title"
+                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
+                      title="11 label"
                     >
-                      11 label
+                      <span
+                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                      />
+                      <span
+                        class="rc-tree-select-tree-title"
+                      >
+                        11 label
+                      </span>
                     </span>
-                  </span>
+                  </div>
                 </div>
               </div>
             </div>
@@ -587,68 +597,73 @@ exports[`TreeSelect.basic render renders treeDataSimpleMode correctly 1`] = `
             </div>
             <div
               class="rc-tree-select-tree-list"
-              style="height: 200px;"
+              style="position: relative;"
             >
-              <div>
-                <div
-                  class="rc-tree-select-tree-list-holder-inner"
-                  style="display: flex; flex-direction: column;"
-                >
+              <div
+                class="rc-tree-select-tree-list-holder"
+                style="max-height: 200px; overflow-y: auto;"
+              >
+                <div>
                   <div
-                    aria-grabbed="false"
-                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
-                    draggable="false"
+                    class="rc-tree-select-tree-list-holder-inner"
+                    style="display: flex; flex-direction: column;"
                   >
-                    <span
-                      aria-hidden="true"
-                      class="rc-tree-select-tree-indent"
-                    />
-                    <span
-                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
-                    />
-                    <span
-                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
-                      title="label0"
+                    <div
+                      aria-grabbed="false"
+                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
+                      draggable="false"
                     >
                       <span
-                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
                       />
                       <span
-                        class="rc-tree-select-tree-title"
+                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
+                      />
+                      <span
+                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
+                        title="label0"
                       >
-                        label0
+                        <span
+                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
+                        />
+                        <span
+                          class="rc-tree-select-tree-title"
+                        >
+                          label0
+                        </span>
                       </span>
-                    </span>
-                  </div>
-                  <div
-                    aria-grabbed="false"
-                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
-                    draggable="false"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="rc-tree-select-tree-indent"
+                    </div>
+                    <div
+                      aria-grabbed="false"
+                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
+                      draggable="false"
                     >
                       <span
-                        class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
-                      />
-                    </span>
-                    <span
-                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
-                    />
-                    <span
-                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                      title="label1"
-                    >
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
+                      >
+                        <span
+                          class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
+                        />
+                      </span>
                       <span
-                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
                       />
                       <span
-                        class="rc-tree-select-tree-title"
+                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
+                        title="label1"
                       >
-                        label1
+                        <span
+                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                        />
+                        <span
+                          class="rc-tree-select-tree-title"
+                        >
+                          label1
+                        </span>
                       </span>
-                    </span>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -724,38 +739,43 @@ exports[`TreeSelect.basic search nodes check tree changed by filter 1`] = `
             </div>
             <div
               class="rc-tree-select-tree-list"
-              style="height: 200px;"
+              style="position: relative;"
             >
-              <div>
-                <div
-                  class="rc-tree-select-tree-list-holder-inner"
-                  style="display: flex; flex-direction: column;"
-                >
+              <div
+                class="rc-tree-select-tree-list-holder"
+                style="max-height: 200px; overflow-y: auto;"
+              >
+                <div>
                   <div
-                    aria-grabbed="false"
-                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last filter-node"
-                    draggable="false"
+                    class="rc-tree-select-tree-list-holder-inner"
+                    style="display: flex; flex-direction: column;"
                   >
-                    <span
-                      aria-hidden="true"
-                      class="rc-tree-select-tree-indent"
-                    />
-                    <span
-                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
-                    />
-                    <span
-                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                      title="labela"
+                    <div
+                      aria-grabbed="false"
+                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last filter-node"
+                      draggable="false"
                     >
                       <span
-                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
                       />
                       <span
-                        class="rc-tree-select-tree-title"
+                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
+                      />
+                      <span
+                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
+                        title="labela"
                       >
-                        labela
+                        <span
+                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                        />
+                        <span
+                          class="rc-tree-select-tree-title"
+                        >
+                          labela
+                        </span>
                       </span>
-                    </span>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -831,64 +851,69 @@ exports[`TreeSelect.basic search nodes check tree changed by filter 2`] = `
             </div>
             <div
               class="rc-tree-select-tree-list"
-              style="height: 200px;"
+              style="position: relative;"
             >
-              <div>
-                <div
-                  class="rc-tree-select-tree-list-holder-inner"
-                  style="display: flex; flex-direction: column;"
-                >
+              <div
+                class="rc-tree-select-tree-list-holder"
+                style="max-height: 200px; overflow-y: auto;"
+              >
+                <div>
                   <div
-                    aria-grabbed="false"
-                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open"
-                    draggable="false"
+                    class="rc-tree-select-tree-list-holder-inner"
+                    style="display: flex; flex-direction: column;"
                   >
-                    <span
-                      aria-hidden="true"
-                      class="rc-tree-select-tree-indent"
-                    />
-                    <span
-                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
-                    />
-                    <span
-                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                      title="labela"
+                    <div
+                      aria-grabbed="false"
+                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open"
+                      draggable="false"
                     >
                       <span
-                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
                       />
                       <span
-                        class="rc-tree-select-tree-title"
+                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
+                      />
+                      <span
+                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
+                        title="labela"
                       >
-                        labela
+                        <span
+                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                        />
+                        <span
+                          class="rc-tree-select-tree-title"
+                        >
+                          labela
+                        </span>
                       </span>
-                    </span>
-                  </div>
-                  <div
-                    aria-grabbed="false"
-                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-leaf-last"
-                    draggable="false"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="rc-tree-select-tree-indent"
-                    />
-                    <span
-                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
-                    />
-                    <span
-                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                      title="labelb"
+                    </div>
+                    <div
+                      aria-grabbed="false"
+                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-leaf-last"
+                      draggable="false"
                     >
                       <span
-                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
                       />
                       <span
-                        class="rc-tree-select-tree-title"
+                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
+                      />
+                      <span
+                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
+                        title="labelb"
                       >
-                        labelb
+                        <span
+                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                        />
+                        <span
+                          class="rc-tree-select-tree-title"
+                        >
+                          labelb
+                        </span>
                       </span>
-                    </span>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -964,64 +989,69 @@ exports[`TreeSelect.basic search nodes filter node but not remove then 1`] = `
             </div>
             <div
               class="rc-tree-select-tree-list"
-              style="height: 200px;"
+              style="position: relative;"
             >
-              <div>
-                <div
-                  class="rc-tree-select-tree-list-holder-inner"
-                  style="display: flex; flex-direction: column;"
-                >
+              <div
+                class="rc-tree-select-tree-list-holder"
+                style="max-height: 200px; overflow-y: auto;"
+              >
+                <div>
                   <div
-                    aria-grabbed="false"
-                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close filter-node"
-                    draggable="false"
+                    class="rc-tree-select-tree-list-holder-inner"
+                    style="display: flex; flex-direction: column;"
                   >
-                    <span
-                      aria-hidden="true"
-                      class="rc-tree-select-tree-indent"
-                    />
-                    <span
-                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
-                    />
-                    <span
-                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                      title="labela"
+                    <div
+                      aria-grabbed="false"
+                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close filter-node"
+                      draggable="false"
                     >
                       <span
-                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
                       />
                       <span
-                        class="rc-tree-select-tree-title"
+                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
+                      />
+                      <span
+                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
+                        title="labela"
                       >
-                        labela
+                        <span
+                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                        />
+                        <span
+                          class="rc-tree-select-tree-title"
+                        >
+                          labela
+                        </span>
                       </span>
-                    </span>
-                  </div>
-                  <div
-                    aria-grabbed="false"
-                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-leaf-last"
-                    draggable="false"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="rc-tree-select-tree-indent"
-                    />
-                    <span
-                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
-                    />
-                    <span
-                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                      title="labelb"
+                    </div>
+                    <div
+                      aria-grabbed="false"
+                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-leaf-last"
+                      draggable="false"
                     >
                       <span
-                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                        aria-hidden="true"
+                        class="rc-tree-select-tree-indent"
                       />
                       <span
-                        class="rc-tree-select-tree-title"
+                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
+                      />
+                      <span
+                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
+                        title="labelb"
                       >
-                        labelb
+                        <span
+                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                        />
+                        <span
+                          class="rc-tree-select-tree-title"
+                        >
+                          labelb
+                        </span>
                       </span>
-                    </span>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -1095,64 +1125,69 @@ exports[`TreeSelect.basic search nodes renders search input 1`] = `
           </div>
           <div
             class="rc-tree-select-tree-list"
-            style="height: 200px;"
+            style="position: relative;"
           >
-            <div>
-              <div
-                class="rc-tree-select-tree-list-holder-inner"
-                style="display: flex; flex-direction: column;"
-              >
+            <div
+              class="rc-tree-select-tree-list-holder"
+              style="max-height: 200px; overflow-y: auto;"
+            >
+              <div>
                 <div
-                  aria-grabbed="false"
-                  class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close"
-                  draggable="false"
+                  class="rc-tree-select-tree-list-holder-inner"
+                  style="display: flex; flex-direction: column;"
                 >
-                  <span
-                    aria-hidden="true"
-                    class="rc-tree-select-tree-indent"
-                  />
-                  <span
-                    class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
-                  />
-                  <span
-                    class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                    title="labela"
+                  <div
+                    aria-grabbed="false"
+                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close"
+                    draggable="false"
                   >
                     <span
-                      class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
+                    />
+                    <span
+                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
                     />
                     <span
-                      class="rc-tree-select-tree-title"
+                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
+                      title="labela"
                     >
-                      labela
+                      <span
+                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                      />
+                      <span
+                        class="rc-tree-select-tree-title"
+                      >
+                        labela
+                      </span>
                     </span>
-                  </span>
-                </div>
-                <div
-                  aria-grabbed="false"
-                  class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-leaf-last"
-                  draggable="false"
-                >
-                  <span
-                    aria-hidden="true"
-                    class="rc-tree-select-tree-indent"
-                  />
-                  <span
-                    class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
-                  />
-                  <span
-                    class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                    title="labelb"
+                  </div>
+                  <div
+                    aria-grabbed="false"
+                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-leaf-last"
+                    draggable="false"
                   >
                     <span
-                      class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
                     />
                     <span
-                      class="rc-tree-select-tree-title"
+                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
+                    />
+                    <span
+                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
+                      title="labelb"
                     >
-                      labelb
+                      <span
+                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
+                      />
+                      <span
+                        class="rc-tree-select-tree-title"
+                      >
+                        labelb
+                      </span>
                     </span>
-                  </span>
+                  </div>
                 </div>
               </div>
             </div>