From fe51563add8d8339c37f22a7039a79034cfd032c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Wed, 22 Oct 2025 11:29:15 +0800
Subject: [PATCH 01/10] test: update snapshot

---
 .../Select.checkable.spec.tsx.snap            | 1515 ++++++++---------
 .../Select.multiple.spec.js.snap              |   65 +-
 tests/__snapshots__/Select.spec.tsx.snap      | 1389 +++++----------
 3 files changed, 1152 insertions(+), 1817 deletions(-)

diff --git a/tests/__snapshots__/Select.checkable.spec.tsx.snap b/tests/__snapshots__/Select.checkable.spec.tsx.snap
index 559c4f80..84669fbf 100644
--- a/tests/__snapshots__/Select.checkable.spec.tsx.snap
+++ b/tests/__snapshots__/Select.checkable.spec.tsx.snap
@@ -3,291 +3,261 @@
 exports[`TreeSelect.checkable uncheck remove by selector not treeCheckStrictly 1`] = `
 <div>
   <div
-    class="rc-tree-select rc-tree-select-multiple rc-tree-select-open rc-tree-select-show-search"
+    class="rc-tree-select rc-tree-select-multiple rc-tree-select-open"
   >
     <div
-      class="rc-tree-select-selector"
+      class="rc-tree-select-content"
     >
-      <span
-        class="rc-tree-select-selection-wrap"
+      <div
+        class="rc-tree-select-content-item"
+        style="opacity: 1;"
       >
-        <div
-          class="rc-tree-select-selection-overflow"
+        <span
+          class="rc-tree-select-selection-item"
+          title="0"
         >
-          <div
-            class="rc-tree-select-selection-overflow-item"
-            style="opacity: 1;"
+          <span
+            class="rc-tree-select-selection-item-content"
           >
-            <span
-              class="rc-tree-select-selection-item"
-              title="0"
-            >
-              <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>
-          </div>
-          <div
-            class="rc-tree-select-selection-overflow-item"
-            style="opacity: 1;"
+            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"
-              title="0-0"
-            >
-              <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>
-          </div>
-          <div
-            class="rc-tree-select-selection-overflow-item"
-            style="opacity: 1;"
+            ×
+          </span>
+        </span>
+      </div>
+      <div
+        class="rc-tree-select-content-item"
+        style="opacity: 1;"
+      >
+        <span
+          class="rc-tree-select-selection-item"
+          title="0-0"
+        >
+          <span
+            class="rc-tree-select-selection-item-content"
           >
-            <span
-              class="rc-tree-select-selection-item"
-              title="0-0-0"
-            >
-              <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>
+            0-0
+          </span>
+          <span
+            aria-hidden="true"
+            class="rc-tree-select-selection-item-remove"
+            style="user-select: none;"
+            unselectable="on"
+          >
+            ×
+          </span>
+        </span>
+      </div>
+      <div
+        class="rc-tree-select-content-item"
+        style="opacity: 1;"
+      >
+        <span
+          class="rc-tree-select-selection-item"
+          title="0-0-0"
+        >
+          <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>
+        </span>
+      </div>
+      <div
+        class="rc-tree-select-content-item rc-tree-select-content-item-suffix"
+        style="opacity: 1;"
+      >
+        <input
+          aria-autocomplete="list"
+          aria-controls="test-id_list"
+          aria-expanded="true"
+          aria-haspopup="listbox"
+          aria-owns="test-id_list"
+          autocomplete="off"
+          class="rc-tree-select-input"
+          id="test-id"
+          readonly=""
+          role="combobox"
+          style="--select-input-width: 0;"
+          type="search"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="rc-tree-select-dropdown rc-tree-select-dropdown-placement-bottomLeft"
+    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+  >
+    <div>
+      <div>
+        <span
+          aria-live="assertive"
+          style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
+        >
+          0
+        </span>
+        <div
+          class="rc-tree-select-tree rc-tree-select-tree-active-focused"
+        >
+          <div>
+            <input
+              aria-label="for screen reader"
+              disabled=""
+              style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
+              value=""
+            />
           </div>
           <div
-            class="rc-tree-select-selection-overflow-item rc-tree-select-selection-overflow-item-suffix"
-            style="opacity: 1;"
+            aria-hidden="true"
+            class="rc-tree-select-tree-treenode"
+            style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
           >
             <div
-              class="rc-tree-select-selection-search"
-              style="width: 0px;"
+              class="rc-tree-select-tree-indent"
             >
-              <input
-                aria-autocomplete="list"
-                aria-controls="test-id_list"
-                aria-expanded="true"
-                aria-haspopup="listbox"
-                aria-owns="test-id_list"
-                autocomplete="off"
-                class="rc-tree-select-selection-search-input"
-                id="test-id"
-                role="combobox"
-                style=""
-                type="search"
-                value=""
+              <div
+                class="rc-tree-select-tree-indent-unit"
               />
-              <span
-                aria-hidden="true"
-                class="rc-tree-select-selection-search-mirror"
-              >
-                 
-              </span>
             </div>
           </div>
-        </div>
-      </span>
-    </div>
-    <div
-      class="rc-tree-select-dropdown rc-tree-select-dropdown-placement-bottomLeft"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
-      <div>
-        <div>
-          <span
-            aria-live="assertive"
-            style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
-          >
-            0
-          </span>
           <div
-            class="rc-tree-select-tree rc-tree-select-tree-active-focused"
+            class="rc-tree-select-tree-list"
+            role="tree"
+            style="position: relative;"
           >
-            <div>
-              <input
-                aria-label="for screen reader"
-                disabled=""
-                style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
-                value=""
-              />
-            </div>
             <div
-              aria-hidden="true"
-              class="rc-tree-select-tree-treenode"
-              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
+              class="rc-tree-select-tree-list-holder"
+              style="max-height: 200px; overflow-y: auto;"
             >
-              <div
-                class="rc-tree-select-tree-indent"
-              >
+              <div>
                 <div
-                  class="rc-tree-select-tree-indent-unit"
-                />
-              </div>
-            </div>
-            <div
-              class="rc-tree-select-tree-list"
-              role="tree"
-              style="position: relative;"
-            >
-              <div
-                class="rc-tree-select-tree-list-holder"
-                style="max-height: 200px; overflow-y: auto;"
-              >
-                <div>
+                  class="rc-tree-select-tree-list-holder-inner"
+                  style="display: flex; flex-direction: column;"
+                >
                   <div
-                    class="rc-tree-select-tree-list-holder-inner"
-                    style="display: flex; flex-direction: column;"
+                    aria-expanded="true"
+                    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-active rc-tree-select-tree-treenode-leaf-last"
+                    draggable="false"
+                    role="treeitem"
                   >
-                    <div
-                      aria-expanded="true"
-                      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-active rc-tree-select-tree-treenode-leaf-last"
-                      draggable="false"
-                      role="treeitem"
+                    <span
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
+                    />
+                    <span
+                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
+                    />
+                    <span
+                      aria-checked="true"
+                      aria-label="Select 0"
+                      class="rc-tree-select-tree-checkbox rc-tree-select-tree-checkbox-checked"
+                      role="checkbox"
+                    />
+                    <span
+                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
+                      title="0"
                     >
                       <span
-                        aria-hidden="true"
-                        class="rc-tree-select-tree-indent"
-                      />
-                      <span
-                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
-                      />
-                      <span
-                        aria-checked="true"
-                        aria-label="Select 0"
-                        class="rc-tree-select-tree-checkbox rc-tree-select-tree-checkbox-checked"
-                        role="checkbox"
+                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
                       />
                       <span
-                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
-                        title="0"
+                        class="rc-tree-select-tree-title"
                       >
-                        <span
-                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
-                        />
-                        <span
-                          class="rc-tree-select-tree-title"
-                        >
-                          0
-                        </span>
+                        0
                       </span>
-                    </div>
-                    <div
-                      aria-expanded="true"
-                      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"
-                      role="treeitem"
+                    </span>
+                  </div>
+                  <div
+                    aria-expanded="true"
+                    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"
+                    role="treeitem"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
                     >
                       <span
-                        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"
+                        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
+                      aria-checked="true"
+                      aria-label="Select 0-0"
+                      class="rc-tree-select-tree-checkbox rc-tree-select-tree-checkbox-checked"
+                      role="checkbox"
+                    />
+                    <span
+                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
+                      title="0-0"
+                    >
                       <span
-                        aria-checked="true"
-                        aria-label="Select 0-0"
-                        class="rc-tree-select-tree-checkbox rc-tree-select-tree-checkbox-checked"
-                        role="checkbox"
+                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
                       />
                       <span
-                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
-                        title="0-0"
+                        class="rc-tree-select-tree-title"
                       >
-                        <span
-                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
-                        />
-                        <span
-                          class="rc-tree-select-tree-title"
-                        >
-                          0-0
-                        </span>
+                        0-0
                       </span>
-                    </div>
-                    <div
-                      aria-expanded="false"
-                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-checkbox-checked rc-tree-select-tree-treenode-leaf-last rc-tree-select-tree-treenode-leaf"
-                      draggable="false"
-                      role="treeitem"
+                    </span>
+                  </div>
+                  <div
+                    aria-expanded="false"
+                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-checkbox-checked rc-tree-select-tree-treenode-leaf-last rc-tree-select-tree-treenode-leaf"
+                    draggable="false"
+                    role="treeitem"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
                     >
                       <span
-                        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>
+                        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-switcher rc-tree-select-tree-switcher-noop"
+                        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
+                      aria-checked="true"
+                      aria-label="Select 0-0-0"
+                      class="rc-tree-select-tree-checkbox rc-tree-select-tree-checkbox-checked"
+                      role="checkbox"
+                    />
+                    <span
+                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
+                      title="0-0-0"
+                    >
                       <span
-                        aria-checked="true"
-                        aria-label="Select 0-0-0"
-                        class="rc-tree-select-tree-checkbox rc-tree-select-tree-checkbox-checked"
-                        role="checkbox"
+                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
                       />
                       <span
-                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                        title="0-0-0"
+                        class="rc-tree-select-tree-title"
                       >
-                        <span
-                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
-                        />
-                        <span
-                          class="rc-tree-select-tree-title"
-                        >
-                          0-0-0
-                        </span>
+                        0-0-0
                       </span>
-                    </div>
+                    </span>
                   </div>
                 </div>
               </div>
@@ -303,213 +273,196 @@ exports[`TreeSelect.checkable uncheck remove by selector not treeCheckStrictly 1
 exports[`TreeSelect.checkable uncheck remove by selector not treeCheckStrictly 2`] = `
 <div>
   <div
-    class="rc-tree-select rc-tree-select-multiple rc-tree-select-open rc-tree-select-show-search"
+    class="rc-tree-select rc-tree-select-multiple rc-tree-select-open"
   >
     <div
-      class="rc-tree-select-selector"
+      class="rc-tree-select-placeholder"
+      style="visibility: visible;"
+    />
+    <div
+      class="rc-tree-select-content"
     >
-      <span
-        class="rc-tree-select-selection-wrap"
+      <div
+        class="rc-tree-select-content-item rc-tree-select-content-item-suffix"
+        style="opacity: 1;"
       >
+        <input
+          aria-autocomplete="list"
+          aria-controls="test-id_list"
+          aria-expanded="true"
+          aria-haspopup="listbox"
+          aria-owns="test-id_list"
+          autocomplete="off"
+          class="rc-tree-select-input"
+          id="test-id"
+          readonly=""
+          role="combobox"
+          style="--select-input-width: 0;"
+          type="search"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="rc-tree-select-dropdown rc-tree-select-dropdown-placement-bottomLeft"
+    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+  >
+    <div>
+      <div>
+        <span
+          aria-live="assertive"
+          style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
+        >
+          0
+        </span>
         <div
-          class="rc-tree-select-selection-overflow"
+          class="rc-tree-select-tree rc-tree-select-tree-active-focused"
         >
+          <div>
+            <input
+              aria-label="for screen reader"
+              disabled=""
+              style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
+              value=""
+            />
+          </div>
           <div
-            class="rc-tree-select-selection-overflow-item rc-tree-select-selection-overflow-item-suffix"
-            style="opacity: 1;"
+            aria-hidden="true"
+            class="rc-tree-select-tree-treenode"
+            style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
           >
             <div
-              class="rc-tree-select-selection-search"
-              style="width: 0px;"
+              class="rc-tree-select-tree-indent"
             >
-              <input
-                aria-autocomplete="list"
-                aria-controls="test-id_list"
-                aria-expanded="true"
-                aria-haspopup="listbox"
-                aria-owns="test-id_list"
-                autocomplete="off"
-                class="rc-tree-select-selection-search-input"
-                id="test-id"
-                role="combobox"
-                style=""
-                type="search"
-                value=""
+              <div
+                class="rc-tree-select-tree-indent-unit"
               />
-              <span
-                aria-hidden="true"
-                class="rc-tree-select-selection-search-mirror"
-              >
-                 
-              </span>
             </div>
           </div>
-        </div>
-        <span
-          class="rc-tree-select-selection-placeholder"
-        />
-      </span>
-    </div>
-    <div
-      class="rc-tree-select-dropdown rc-tree-select-dropdown-placement-bottomLeft"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
-      <div>
-        <div>
-          <span
-            aria-live="assertive"
-            style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
-          >
-            0
-          </span>
           <div
-            class="rc-tree-select-tree rc-tree-select-tree-active-focused"
+            class="rc-tree-select-tree-list"
+            role="tree"
+            style="position: relative;"
           >
-            <div>
-              <input
-                aria-label="for screen reader"
-                disabled=""
-                style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
-                value=""
-              />
-            </div>
             <div
-              aria-hidden="true"
-              class="rc-tree-select-tree-treenode"
-              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
+              class="rc-tree-select-tree-list-holder"
+              style="max-height: 200px; overflow-y: auto;"
             >
-              <div
-                class="rc-tree-select-tree-indent"
-              >
+              <div>
                 <div
-                  class="rc-tree-select-tree-indent-unit"
-                />
-              </div>
-            </div>
-            <div
-              class="rc-tree-select-tree-list"
-              role="tree"
-              style="position: relative;"
-            >
-              <div
-                class="rc-tree-select-tree-list-holder"
-                style="max-height: 200px; overflow-y: auto;"
-              >
-                <div>
+                  class="rc-tree-select-tree-list-holder-inner"
+                  style="display: flex; flex-direction: column;"
+                >
                   <div
-                    class="rc-tree-select-tree-list-holder-inner"
-                    style="display: flex; flex-direction: column;"
+                    aria-expanded="true"
+                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-active rc-tree-select-tree-treenode-leaf-last"
+                    draggable="false"
+                    role="treeitem"
                   >
-                    <div
-                      aria-expanded="true"
-                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-active rc-tree-select-tree-treenode-leaf-last"
-                      draggable="false"
-                      role="treeitem"
+                    <span
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
+                    />
+                    <span
+                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
+                    />
+                    <span
+                      aria-checked="false"
+                      aria-label="Select 0"
+                      class="rc-tree-select-tree-checkbox"
+                      role="checkbox"
+                    />
+                    <span
+                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
+                      title="0"
                     >
                       <span
-                        aria-hidden="true"
-                        class="rc-tree-select-tree-indent"
+                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
                       />
                       <span
-                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
-                      />
-                      <span
-                        aria-checked="false"
-                        aria-label="Select 0"
-                        class="rc-tree-select-tree-checkbox"
-                        role="checkbox"
-                      />
-                      <span
-                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
-                        title="0"
+                        class="rc-tree-select-tree-title"
                       >
-                        <span
-                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
-                        />
-                        <span
-                          class="rc-tree-select-tree-title"
-                        >
-                          0
-                        </span>
+                        0
                       </span>
-                    </div>
-                    <div
-                      aria-expanded="true"
-                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
-                      draggable="false"
-                      role="treeitem"
+                    </span>
+                  </div>
+                  <div
+                    aria-expanded="true"
+                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
+                    draggable="false"
+                    role="treeitem"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
                     >
                       <span
-                        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"
+                        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
+                      aria-checked="false"
+                      aria-label="Select 0-0"
+                      class="rc-tree-select-tree-checkbox"
+                      role="checkbox"
+                    />
+                    <span
+                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
+                      title="0-0"
+                    >
                       <span
-                        aria-checked="false"
-                        aria-label="Select 0-0"
-                        class="rc-tree-select-tree-checkbox"
-                        role="checkbox"
+                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
                       />
                       <span
-                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
-                        title="0-0"
+                        class="rc-tree-select-tree-title"
                       >
-                        <span
-                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
-                        />
-                        <span
-                          class="rc-tree-select-tree-title"
-                        >
-                          0-0
-                        </span>
+                        0-0
                       </span>
-                    </div>
-                    <div
-                      aria-expanded="false"
-                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-leaf-last rc-tree-select-tree-treenode-leaf"
-                      draggable="false"
-                      role="treeitem"
+                    </span>
+                  </div>
+                  <div
+                    aria-expanded="false"
+                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-leaf-last rc-tree-select-tree-treenode-leaf"
+                    draggable="false"
+                    role="treeitem"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
                     >
                       <span
-                        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>
+                        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-switcher rc-tree-select-tree-switcher-noop"
+                        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
+                      aria-checked="false"
+                      aria-label="Select 0-0-0"
+                      class="rc-tree-select-tree-checkbox"
+                      role="checkbox"
+                    />
+                    <span
+                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
+                      title="0-0-0"
+                    >
                       <span
-                        aria-checked="false"
-                        aria-label="Select 0-0-0"
-                        class="rc-tree-select-tree-checkbox"
-                        role="checkbox"
+                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
                       />
                       <span
-                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                        title="0-0-0"
+                        class="rc-tree-select-tree-title"
                       >
-                        <span
-                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
-                        />
-                        <span
-                          class="rc-tree-select-tree-title"
-                        >
-                          0-0-0
-                        </span>
+                        0-0-0
                       </span>
-                    </div>
+                    </span>
                   </div>
                 </div>
               </div>
@@ -525,291 +478,261 @@ exports[`TreeSelect.checkable uncheck remove by selector not treeCheckStrictly 2
 exports[`TreeSelect.checkable uncheck remove by tree check 1`] = `
 <div>
   <div
-    class="rc-tree-select rc-tree-select-multiple rc-tree-select-open rc-tree-select-show-search"
+    class="rc-tree-select rc-tree-select-multiple rc-tree-select-open"
   >
     <div
-      class="rc-tree-select-selector"
+      class="rc-tree-select-content"
     >
-      <span
-        class="rc-tree-select-selection-wrap"
+      <div
+        class="rc-tree-select-content-item"
+        style="opacity: 1;"
       >
-        <div
-          class="rc-tree-select-selection-overflow"
+        <span
+          class="rc-tree-select-selection-item"
+          title="0"
         >
-          <div
-            class="rc-tree-select-selection-overflow-item"
-            style="opacity: 1;"
+          <span
+            class="rc-tree-select-selection-item-content"
           >
-            <span
-              class="rc-tree-select-selection-item"
-              title="0"
-            >
-              <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>
-          </div>
-          <div
-            class="rc-tree-select-selection-overflow-item"
-            style="opacity: 1;"
+            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"
-              title="0-0"
-            >
-              <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>
-          </div>
-          <div
-            class="rc-tree-select-selection-overflow-item"
-            style="opacity: 1;"
+            ×
+          </span>
+        </span>
+      </div>
+      <div
+        class="rc-tree-select-content-item"
+        style="opacity: 1;"
+      >
+        <span
+          class="rc-tree-select-selection-item"
+          title="0-0"
+        >
+          <span
+            class="rc-tree-select-selection-item-content"
           >
-            <span
-              class="rc-tree-select-selection-item"
-              title="0-0-0"
-            >
-              <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>
+            0-0
+          </span>
+          <span
+            aria-hidden="true"
+            class="rc-tree-select-selection-item-remove"
+            style="user-select: none;"
+            unselectable="on"
+          >
+            ×
+          </span>
+        </span>
+      </div>
+      <div
+        class="rc-tree-select-content-item"
+        style="opacity: 1;"
+      >
+        <span
+          class="rc-tree-select-selection-item"
+          title="0-0-0"
+        >
+          <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>
+        </span>
+      </div>
+      <div
+        class="rc-tree-select-content-item rc-tree-select-content-item-suffix"
+        style="opacity: 1;"
+      >
+        <input
+          aria-autocomplete="list"
+          aria-controls="test-id_list"
+          aria-expanded="true"
+          aria-haspopup="listbox"
+          aria-owns="test-id_list"
+          autocomplete="off"
+          class="rc-tree-select-input"
+          id="test-id"
+          readonly=""
+          role="combobox"
+          style="--select-input-width: 0;"
+          type="search"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="rc-tree-select-dropdown rc-tree-select-dropdown-placement-bottomLeft"
+    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+  >
+    <div>
+      <div>
+        <span
+          aria-live="assertive"
+          style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
+        >
+          0
+        </span>
+        <div
+          class="rc-tree-select-tree rc-tree-select-tree-active-focused"
+        >
+          <div>
+            <input
+              aria-label="for screen reader"
+              disabled=""
+              style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
+              value=""
+            />
           </div>
           <div
-            class="rc-tree-select-selection-overflow-item rc-tree-select-selection-overflow-item-suffix"
-            style="opacity: 1;"
+            aria-hidden="true"
+            class="rc-tree-select-tree-treenode"
+            style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
           >
             <div
-              class="rc-tree-select-selection-search"
-              style="width: 0px;"
+              class="rc-tree-select-tree-indent"
             >
-              <input
-                aria-autocomplete="list"
-                aria-controls="test-id_list"
-                aria-expanded="true"
-                aria-haspopup="listbox"
-                aria-owns="test-id_list"
-                autocomplete="off"
-                class="rc-tree-select-selection-search-input"
-                id="test-id"
-                role="combobox"
-                style=""
-                type="search"
-                value="0"
+              <div
+                class="rc-tree-select-tree-indent-unit"
               />
-              <span
-                aria-hidden="true"
-                class="rc-tree-select-selection-search-mirror"
-              >
-                0 
-              </span>
             </div>
           </div>
-        </div>
-      </span>
-    </div>
-    <div
-      class="rc-tree-select-dropdown rc-tree-select-dropdown-placement-bottomLeft"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
-      <div>
-        <div>
-          <span
-            aria-live="assertive"
-            style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
-          >
-            0
-          </span>
           <div
-            class="rc-tree-select-tree rc-tree-select-tree-active-focused"
+            class="rc-tree-select-tree-list"
+            role="tree"
+            style="position: relative;"
           >
-            <div>
-              <input
-                aria-label="for screen reader"
-                disabled=""
-                style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
-                value=""
-              />
-            </div>
             <div
-              aria-hidden="true"
-              class="rc-tree-select-tree-treenode"
-              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
+              class="rc-tree-select-tree-list-holder"
+              style="max-height: 200px; overflow-y: auto;"
             >
-              <div
-                class="rc-tree-select-tree-indent"
-              >
+              <div>
                 <div
-                  class="rc-tree-select-tree-indent-unit"
-                />
-              </div>
-            </div>
-            <div
-              class="rc-tree-select-tree-list"
-              role="tree"
-              style="position: relative;"
-            >
-              <div
-                class="rc-tree-select-tree-list-holder"
-                style="max-height: 200px; overflow-y: auto;"
-              >
-                <div>
+                  class="rc-tree-select-tree-list-holder-inner"
+                  style="display: flex; flex-direction: column;"
+                >
                   <div
-                    class="rc-tree-select-tree-list-holder-inner"
-                    style="display: flex; flex-direction: column;"
+                    aria-expanded="true"
+                    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-active rc-tree-select-tree-treenode-leaf-last filter-node"
+                    draggable="false"
+                    role="treeitem"
                   >
-                    <div
-                      aria-expanded="true"
-                      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-active rc-tree-select-tree-treenode-leaf-last filter-node"
-                      draggable="false"
-                      role="treeitem"
+                    <span
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
+                    />
+                    <span
+                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
+                    />
+                    <span
+                      aria-checked="true"
+                      aria-label="Select 0"
+                      class="rc-tree-select-tree-checkbox rc-tree-select-tree-checkbox-checked"
+                      role="checkbox"
+                    />
+                    <span
+                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
+                      title="0"
                     >
                       <span
-                        aria-hidden="true"
-                        class="rc-tree-select-tree-indent"
+                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
                       />
                       <span
-                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
-                      />
-                      <span
-                        aria-checked="true"
-                        aria-label="Select 0"
-                        class="rc-tree-select-tree-checkbox rc-tree-select-tree-checkbox-checked"
-                        role="checkbox"
-                      />
-                      <span
-                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
-                        title="0"
+                        class="rc-tree-select-tree-title"
                       >
-                        <span
-                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
-                        />
-                        <span
-                          class="rc-tree-select-tree-title"
-                        >
-                          0
-                        </span>
+                        0
                       </span>
-                    </div>
-                    <div
-                      aria-expanded="true"
-                      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"
-                      role="treeitem"
+                    </span>
+                  </div>
+                  <div
+                    aria-expanded="true"
+                    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"
+                    role="treeitem"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
                     >
                       <span
-                        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"
+                        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
+                      aria-checked="true"
+                      aria-label="Select 0-0"
+                      class="rc-tree-select-tree-checkbox rc-tree-select-tree-checkbox-checked"
+                      role="checkbox"
+                    />
+                    <span
+                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
+                      title="0-0"
+                    >
                       <span
-                        aria-checked="true"
-                        aria-label="Select 0-0"
-                        class="rc-tree-select-tree-checkbox rc-tree-select-tree-checkbox-checked"
-                        role="checkbox"
+                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
                       />
                       <span
-                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
-                        title="0-0"
+                        class="rc-tree-select-tree-title"
                       >
-                        <span
-                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
-                        />
-                        <span
-                          class="rc-tree-select-tree-title"
-                        >
-                          0-0
-                        </span>
+                        0-0
                       </span>
-                    </div>
-                    <div
-                      aria-expanded="true"
-                      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 rc-tree-select-tree-treenode-leaf"
-                      draggable="false"
-                      role="treeitem"
+                    </span>
+                  </div>
+                  <div
+                    aria-expanded="true"
+                    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 rc-tree-select-tree-treenode-leaf"
+                    draggable="false"
+                    role="treeitem"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
                     >
                       <span
-                        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>
+                        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-switcher rc-tree-select-tree-switcher-noop"
+                        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
+                      aria-checked="true"
+                      aria-label="Select 0-0-0"
+                      class="rc-tree-select-tree-checkbox rc-tree-select-tree-checkbox-checked"
+                      role="checkbox"
+                    />
+                    <span
+                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
+                      title="0-0-0"
+                    >
                       <span
-                        aria-checked="true"
-                        aria-label="Select 0-0-0"
-                        class="rc-tree-select-tree-checkbox rc-tree-select-tree-checkbox-checked"
-                        role="checkbox"
+                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
                       />
                       <span
-                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                        title="0-0-0"
+                        class="rc-tree-select-tree-title"
                       >
-                        <span
-                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
-                        />
-                        <span
-                          class="rc-tree-select-tree-title"
-                        >
-                          0-0-0
-                        </span>
+                        0-0-0
                       </span>
-                    </div>
+                    </span>
                   </div>
                 </div>
               </div>
@@ -825,210 +748,196 @@ exports[`TreeSelect.checkable uncheck remove by tree check 1`] = `
 exports[`TreeSelect.checkable uncheck remove by tree check 2`] = `
 <div>
   <div
-    class="rc-tree-select rc-tree-select-multiple rc-tree-select-open rc-tree-select-show-search"
+    class="rc-tree-select rc-tree-select-multiple rc-tree-select-open"
   >
     <div
-      class="rc-tree-select-selector"
+      class="rc-tree-select-placeholder"
+      style="visibility: hidden;"
+    />
+    <div
+      class="rc-tree-select-content"
     >
-      <span
-        class="rc-tree-select-selection-wrap"
+      <div
+        class="rc-tree-select-content-item rc-tree-select-content-item-suffix"
+        style="opacity: 1;"
       >
+        <input
+          aria-autocomplete="list"
+          aria-controls="test-id_list"
+          aria-expanded="true"
+          aria-haspopup="listbox"
+          aria-owns="test-id_list"
+          autocomplete="off"
+          class="rc-tree-select-input"
+          id="test-id"
+          readonly=""
+          role="combobox"
+          style="--select-input-width: 0;"
+          type="search"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="rc-tree-select-dropdown rc-tree-select-dropdown-placement-bottomLeft"
+    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+  >
+    <div>
+      <div>
+        <span
+          aria-live="assertive"
+          style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
+        >
+          0
+        </span>
         <div
-          class="rc-tree-select-selection-overflow"
+          class="rc-tree-select-tree rc-tree-select-tree-active-focused"
         >
+          <div>
+            <input
+              aria-label="for screen reader"
+              disabled=""
+              style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
+              value=""
+            />
+          </div>
           <div
-            class="rc-tree-select-selection-overflow-item rc-tree-select-selection-overflow-item-suffix"
-            style="opacity: 1;"
+            aria-hidden="true"
+            class="rc-tree-select-tree-treenode"
+            style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
           >
             <div
-              class="rc-tree-select-selection-search"
-              style="width: 0px;"
+              class="rc-tree-select-tree-indent"
             >
-              <input
-                aria-autocomplete="list"
-                aria-controls="test-id_list"
-                aria-expanded="true"
-                aria-haspopup="listbox"
-                aria-owns="test-id_list"
-                autocomplete="off"
-                class="rc-tree-select-selection-search-input"
-                id="test-id"
-                role="combobox"
-                style=""
-                type="search"
-                value="0"
+              <div
+                class="rc-tree-select-tree-indent-unit"
               />
-              <span
-                aria-hidden="true"
-                class="rc-tree-select-selection-search-mirror"
-              >
-                0 
-              </span>
             </div>
           </div>
-        </div>
-      </span>
-    </div>
-    <div
-      class="rc-tree-select-dropdown rc-tree-select-dropdown-placement-bottomLeft"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
-      <div>
-        <div>
-          <span
-            aria-live="assertive"
-            style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
-          >
-            0
-          </span>
           <div
-            class="rc-tree-select-tree rc-tree-select-tree-active-focused"
+            class="rc-tree-select-tree-list"
+            role="tree"
+            style="position: relative;"
           >
-            <div>
-              <input
-                aria-label="for screen reader"
-                disabled=""
-                style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
-                value=""
-              />
-            </div>
             <div
-              aria-hidden="true"
-              class="rc-tree-select-tree-treenode"
-              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
+              class="rc-tree-select-tree-list-holder"
+              style="max-height: 200px; overflow-y: auto;"
             >
-              <div
-                class="rc-tree-select-tree-indent"
-              >
+              <div>
                 <div
-                  class="rc-tree-select-tree-indent-unit"
-                />
-              </div>
-            </div>
-            <div
-              class="rc-tree-select-tree-list"
-              role="tree"
-              style="position: relative;"
-            >
-              <div
-                class="rc-tree-select-tree-list-holder"
-                style="max-height: 200px; overflow-y: auto;"
-              >
-                <div>
+                  class="rc-tree-select-tree-list-holder-inner"
+                  style="display: flex; flex-direction: column;"
+                >
                   <div
-                    class="rc-tree-select-tree-list-holder-inner"
-                    style="display: flex; flex-direction: column;"
+                    aria-expanded="true"
+                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-active rc-tree-select-tree-treenode-leaf-last filter-node"
+                    draggable="false"
+                    role="treeitem"
                   >
-                    <div
-                      aria-expanded="true"
-                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-active rc-tree-select-tree-treenode-leaf-last filter-node"
-                      draggable="false"
-                      role="treeitem"
+                    <span
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
+                    />
+                    <span
+                      class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
+                    />
+                    <span
+                      aria-checked="false"
+                      aria-label="Select 0"
+                      class="rc-tree-select-tree-checkbox"
+                      role="checkbox"
+                    />
+                    <span
+                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
+                      title="0"
                     >
                       <span
-                        aria-hidden="true"
-                        class="rc-tree-select-tree-indent"
-                      />
-                      <span
-                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
-                      />
-                      <span
-                        aria-checked="false"
-                        aria-label="Select 0"
-                        class="rc-tree-select-tree-checkbox"
-                        role="checkbox"
+                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
                       />
                       <span
-                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
-                        title="0"
+                        class="rc-tree-select-tree-title"
                       >
-                        <span
-                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
-                        />
-                        <span
-                          class="rc-tree-select-tree-title"
-                        >
-                          0
-                        </span>
+                        0
                       </span>
-                    </div>
-                    <div
-                      aria-expanded="true"
-                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last filter-node"
-                      draggable="false"
-                      role="treeitem"
+                    </span>
+                  </div>
+                  <div
+                    aria-expanded="true"
+                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last filter-node"
+                    draggable="false"
+                    role="treeitem"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
                     >
                       <span
-                        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"
+                        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
+                      aria-checked="false"
+                      aria-label="Select 0-0"
+                      class="rc-tree-select-tree-checkbox"
+                      role="checkbox"
+                    />
+                    <span
+                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
+                      title="0-0"
+                    >
                       <span
-                        aria-checked="false"
-                        aria-label="Select 0-0"
-                        class="rc-tree-select-tree-checkbox"
-                        role="checkbox"
+                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
                       />
                       <span
-                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
-                        title="0-0"
+                        class="rc-tree-select-tree-title"
                       >
-                        <span
-                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
-                        />
-                        <span
-                          class="rc-tree-select-tree-title"
-                        >
-                          0-0
-                        </span>
+                        0-0
                       </span>
-                    </div>
-                    <div
-                      aria-expanded="true"
-                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last filter-node rc-tree-select-tree-treenode-leaf"
-                      draggable="false"
-                      role="treeitem"
+                    </span>
+                  </div>
+                  <div
+                    aria-expanded="true"
+                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last filter-node rc-tree-select-tree-treenode-leaf"
+                    draggable="false"
+                    role="treeitem"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="rc-tree-select-tree-indent"
                     >
                       <span
-                        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>
+                        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-switcher rc-tree-select-tree-switcher-noop"
+                        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
+                      aria-checked="false"
+                      aria-label="Select 0-0-0"
+                      class="rc-tree-select-tree-checkbox"
+                      role="checkbox"
+                    />
+                    <span
+                      class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
+                      title="0-0-0"
+                    >
                       <span
-                        aria-checked="false"
-                        aria-label="Select 0-0-0"
-                        class="rc-tree-select-tree-checkbox"
-                        role="checkbox"
+                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
                       />
                       <span
-                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                        title="0-0-0"
+                        class="rc-tree-select-tree-title"
                       >
-                        <span
-                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
-                        />
-                        <span
-                          class="rc-tree-select-tree-title"
-                        >
-                          0-0-0
-                        </span>
+                        0-0-0
                       </span>
-                    </div>
+                    </span>
                   </div>
                 </div>
               </div>
diff --git a/tests/__snapshots__/Select.multiple.spec.js.snap b/tests/__snapshots__/Select.multiple.spec.js.snap
index 76a657d5..3aa24f5d 100644
--- a/tests/__snapshots__/Select.multiple.spec.js.snap
+++ b/tests/__snapshots__/Select.multiple.spec.js.snap
@@ -5,51 +5,32 @@ exports[`TreeSelect.multiple can hide search box by showSearch = false 1`] = `
   class="rc-tree-select rc-tree-select-multiple"
 >
   <div
-    class="rc-tree-select-selector"
+    class="rc-tree-select-placeholder"
+    style="visibility: visible;"
+  />
+  <div
+    class="rc-tree-select-content"
   >
-    <span
-      class="rc-tree-select-selection-wrap"
+    <div
+      class="rc-tree-select-content-item rc-tree-select-content-item-suffix"
+      style="opacity: 1;"
     >
-      <div
-        class="rc-tree-select-selection-overflow"
-      >
-        <div
-          class="rc-tree-select-selection-overflow-item rc-tree-select-selection-overflow-item-suffix"
-          style="opacity: 1;"
-        >
-          <div
-            class="rc-tree-select-selection-search"
-            style="width: 0px;"
-          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="test-id_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="test-id_list"
-              autocomplete="off"
-              class="rc-tree-select-selection-search-input"
-              id="test-id"
-              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"
+      <input
+        aria-autocomplete="list"
+        aria-controls="test-id_list"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-owns="test-id_list"
+        autocomplete="off"
+        class="rc-tree-select-input"
+        id="test-id"
+        readonly=""
+        role="combobox"
+        style="--select-input-width: 0;"
+        type="search"
+        value=""
       />
-    </span>
+    </div>
   </div>
 </div>
 `;
diff --git a/tests/__snapshots__/Select.spec.tsx.snap b/tests/__snapshots__/Select.spec.tsx.snap
index c5d98188..8cdb4e78 100644
--- a/tests/__snapshots__/Select.spec.tsx.snap
+++ b/tests/__snapshots__/Select.spec.tsx.snap
@@ -3,6 +3,100 @@
 exports[`TreeSelect.basic render renders TreeNode correctly 1`] = `
 <div
   class="rc-tree-select rc-tree-select-single rc-tree-select-open"
+>
+  <div
+    class="rc-tree-select-content"
+  >
+    <div
+      class="rc-tree-select-placeholder"
+      style="visibility: visible;"
+    />
+    <input
+      aria-autocomplete="list"
+      aria-controls="test-id_list"
+      aria-expanded="true"
+      aria-haspopup="listbox"
+      aria-owns="test-id_list"
+      autocomplete="off"
+      class="rc-tree-select-input"
+      id="test-id"
+      readonly=""
+      role="combobox"
+      type="search"
+      value=""
+    />
+  </div>
+</div>
+`;
+
+exports[`TreeSelect.basic render renders TreeNode correctly with falsy child 1`] = `
+<div
+  class="rc-tree-select rc-tree-select-single rc-tree-select-open"
+>
+  <div
+    class="rc-tree-select-content"
+  >
+    <div
+      class="rc-tree-select-placeholder"
+      style="visibility: visible;"
+    />
+    <input
+      aria-autocomplete="list"
+      aria-controls="test-id_list"
+      aria-expanded="true"
+      aria-haspopup="listbox"
+      aria-owns="test-id_list"
+      autocomplete="off"
+      class="rc-tree-select-input"
+      id="test-id"
+      readonly=""
+      role="combobox"
+      type="search"
+      value=""
+    />
+  </div>
+</div>
+`;
+
+exports[`TreeSelect.basic render renders correctly 1`] = `
+<div
+  class="awesome forTest awesome-multiple"
+  style="width: 300px;"
+>
+  <div
+    class="awesome-placeholder"
+    style="visibility: visible;"
+  />
+  <div
+    class="awesome-content"
+  >
+    <div
+      class="awesome-content-item awesome-content-item-suffix"
+      style="opacity: 1;"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="test-id_list"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-owns="test-id_list"
+        autocomplete="off"
+        class="awesome-input"
+        id="test-id"
+        readonly=""
+        role="combobox"
+        style="--select-input-width: 0;"
+        type="search"
+        value=""
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`TreeSelect.basic render renders disabled correctly 1`] = `
+<div
+  class="rc-tree-select rc-tree-select-single rc-tree-select-disabled"
 >
   <div
     class="rc-tree-select-selector"
@@ -16,11 +110,12 @@ exports[`TreeSelect.basic render renders TreeNode correctly 1`] = `
         <input
           aria-autocomplete="list"
           aria-controls="test-id_list"
-          aria-expanded="true"
+          aria-expanded="false"
           aria-haspopup="listbox"
           aria-owns="test-id_list"
           autocomplete="off"
           class="rc-tree-select-selection-search-input"
+          disabled=""
           id="test-id"
           readonly=""
           role="combobox"
@@ -35,9 +130,46 @@ exports[`TreeSelect.basic render renders TreeNode correctly 1`] = `
       />
     </span>
   </div>
+</div>
+`;
+
+exports[`TreeSelect.basic render renders tree correctly 1`] = `
+<div>
   <div
-    class="rc-tree-select-dropdown rc-tree-select-dropdown-placement-bottomLeft"
-    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+    class="rc-tree-select rc-tree-select-multiple rc-tree-select-open"
+  >
+    <div
+      class="rc-tree-select-placeholder"
+      style="visibility: visible;"
+    />
+    <div
+      class="rc-tree-select-content"
+    >
+      <div
+        class="rc-tree-select-content-item rc-tree-select-content-item-suffix"
+        style="opacity: 1;"
+      >
+        <input
+          aria-autocomplete="list"
+          aria-controls="test-id_list"
+          aria-expanded="true"
+          aria-haspopup="listbox"
+          aria-owns="test-id_list"
+          autocomplete="off"
+          class="rc-tree-select-input"
+          id="test-id"
+          readonly=""
+          role="combobox"
+          style="--select-input-width: 0;"
+          type="search"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="rc-tree-select-dropdown awesome rc-tree-select-dropdown-placement-bottomLeft"
+    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 300px;"
   >
     <div>
       <div>
@@ -98,6 +230,12 @@ exports[`TreeSelect.basic render renders TreeNode correctly 1`] = `
                     <span
                       class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
                     />
+                    <span
+                      aria-checked="false"
+                      aria-label="Select 0 label"
+                      class="rc-tree-select-tree-checkbox"
+                      role="checkbox"
+                    />
                     <span
                       class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
                       title="0 label"
@@ -125,6 +263,12 @@ exports[`TreeSelect.basic render renders TreeNode correctly 1`] = `
                     <span
                       class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
                     />
+                    <span
+                      aria-checked="false"
+                      aria-label="Select 1 label"
+                      class="rc-tree-select-tree-checkbox"
+                      role="checkbox"
+                    />
                     <span
                       class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
                       title="1 label"
@@ -156,6 +300,12 @@ exports[`TreeSelect.basic render renders TreeNode correctly 1`] = `
                     <span
                       class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
                     />
+                    <span
+                      aria-checked="false"
+                      aria-label="Select 10 label"
+                      class="rc-tree-select-tree-checkbox"
+                      role="checkbox"
+                    />
                     <span
                       class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
                       title="10 label"
@@ -187,6 +337,12 @@ exports[`TreeSelect.basic render renders TreeNode correctly 1`] = `
                     <span
                       class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
                     />
+                    <span
+                      aria-checked="false"
+                      aria-label="Select 11 label"
+                      class="rc-tree-select-tree-checkbox"
+                      role="checkbox"
+                    />
                     <span
                       class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
                       title="11 label"
@@ -212,40 +368,33 @@ exports[`TreeSelect.basic render renders TreeNode correctly 1`] = `
 </div>
 `;
 
-exports[`TreeSelect.basic render renders TreeNode correctly with falsy child 1`] = `
-<div
-  class="rc-tree-select rc-tree-select-single rc-tree-select-open"
->
+exports[`TreeSelect.basic render renders treeDataSimpleMode correctly 1`] = `
+<div>
   <div
-    class="rc-tree-select-selector"
+    class="rc-tree-select rc-tree-select-single rc-tree-select-open"
   >
-    <span
-      class="rc-tree-select-selection-wrap"
+    <div
+      class="rc-tree-select-content"
     >
-      <span
-        class="rc-tree-select-selection-search"
-      >
-        <input
-          aria-autocomplete="list"
-          aria-controls="test-id_list"
-          aria-expanded="true"
-          aria-haspopup="listbox"
-          aria-owns="test-id_list"
-          autocomplete="off"
-          class="rc-tree-select-selection-search-input"
-          id="test-id"
-          readonly=""
-          role="combobox"
-          style="opacity: 0;"
-          type="search"
-          unselectable="on"
-          value=""
-        />
-      </span>
-      <span
-        class="rc-tree-select-selection-placeholder"
+      <div
+        class="rc-tree-select-placeholder"
+        style="visibility: visible;"
       />
-    </span>
+      <input
+        aria-autocomplete="list"
+        aria-controls="test-id_list"
+        aria-expanded="true"
+        aria-haspopup="listbox"
+        aria-owns="test-id_list"
+        autocomplete="off"
+        class="rc-tree-select-input"
+        id="test-id"
+        readonly=""
+        role="combobox"
+        type="search"
+        value=""
+      />
+    </div>
   </div>
   <div
     class="rc-tree-select-dropdown rc-tree-select-dropdown-placement-bottomLeft"
@@ -297,36 +446,9 @@ exports[`TreeSelect.basic render renders TreeNode correctly with falsy child 1`]
                   class="rc-tree-select-tree-list-holder-inner"
                   style="display: flex; flex-direction: column;"
                 >
-                  <div
-                    aria-expanded="false"
-                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-active rc-tree-select-tree-treenode-leaf"
-                    draggable="false"
-                    role="treeitem"
-                  >
-                    <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"
-                    >
-                      <span
-                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
-                      />
-                      <span
-                        class="rc-tree-select-tree-title"
-                      >
-                        0 label
-                      </span>
-                    </span>
-                  </div>
                   <div
                     aria-expanded="true"
-                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
+                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-active rc-tree-select-tree-treenode-leaf-last"
                     draggable="false"
                     role="treeitem"
                   >
@@ -339,7 +461,7 @@ exports[`TreeSelect.basic render renders TreeNode correctly with falsy child 1`]
                     />
                     <span
                       class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
-                      title="1 label"
+                      title="label0"
                     >
                       <span
                         class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
@@ -347,13 +469,13 @@ exports[`TreeSelect.basic render renders TreeNode correctly with falsy child 1`]
                       <span
                         class="rc-tree-select-tree-title"
                       >
-                        1 label
+                        label0
                       </span>
                     </span>
                   </div>
                   <div
                     aria-expanded="false"
-                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-leaf"
+                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-leaf-last rc-tree-select-tree-treenode-leaf"
                     draggable="false"
                     role="treeitem"
                   >
@@ -362,7 +484,7 @@ exports[`TreeSelect.basic render renders TreeNode correctly with falsy child 1`]
                       class="rc-tree-select-tree-indent"
                     >
                       <span
-                        class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-end"
+                        class="rc-tree-select-tree-indent-unit rc-tree-select-tree-indent-unit-start rc-tree-select-tree-indent-unit-end"
                       />
                     </span>
                     <span
@@ -370,7 +492,7 @@ exports[`TreeSelect.basic render renders TreeNode correctly with falsy child 1`]
                     />
                     <span
                       class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                      title="10 label"
+                      title="label1"
                     >
                       <span
                         class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
@@ -378,30 +500,114 @@ exports[`TreeSelect.basic render renders TreeNode correctly with falsy child 1`]
                       <span
                         class="rc-tree-select-tree-title"
                       >
-                        10 label
+                        label1
                       </span>
                     </span>
                   </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`TreeSelect.basic search nodes check tree changed by filter 1`] = `
+<div>
+  <div
+    class="rc-tree-select rc-tree-select-single rc-tree-select-open rc-tree-select-show-search"
+  >
+    <div
+      class="rc-tree-select-content"
+    >
+      <div
+        class="rc-tree-select-placeholder"
+        style="visibility: hidden;"
+      />
+      <input
+        aria-autocomplete="list"
+        aria-controls="test-id_list"
+        aria-expanded="true"
+        aria-haspopup="listbox"
+        aria-owns="test-id_list"
+        autocomplete="off"
+        class="rc-tree-select-input"
+        id="test-id"
+        role="combobox"
+        type="search"
+        value="a"
+      />
+    </div>
+  </div>
+  <div
+    class="rc-tree-select-dropdown rc-tree-select-dropdown-placement-bottomLeft"
+    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+  >
+    <div>
+      <div>
+        <span
+          aria-live="assertive"
+          style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
+        >
+          a
+        </span>
+        <div
+          class="rc-tree-select-tree rc-tree-select-tree-active-focused"
+        >
+          <div>
+            <input
+              aria-label="for screen reader"
+              disabled=""
+              style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
+              value=""
+            />
+          </div>
+          <div
+            aria-hidden="true"
+            class="rc-tree-select-tree-treenode"
+            style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
+          >
+            <div
+              class="rc-tree-select-tree-indent"
+            >
+              <div
+                class="rc-tree-select-tree-indent-unit"
+              />
+            </div>
+          </div>
+          <div
+            class="rc-tree-select-tree-list"
+            role="tree"
+            style="position: relative;"
+          >
+            <div
+              class="rc-tree-select-tree-list-holder"
+              style="max-height: 200px; overflow-y: auto;"
+            >
+              <div>
+                <div
+                  class="rc-tree-select-tree-list-holder-inner"
+                  style="display: flex; flex-direction: column;"
+                >
                   <div
-                    aria-expanded="false"
-                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-leaf-last rc-tree-select-tree-treenode-leaf"
+                    aria-expanded="true"
+                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-active rc-tree-select-tree-treenode-leaf-last filter-node rc-tree-select-tree-treenode-leaf"
                     draggable="false"
                     role="treeitem"
                   >
                     <span
                       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-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"
+                      title="labela"
                     >
                       <span
                         class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
@@ -409,7 +615,7 @@ exports[`TreeSelect.basic render renders TreeNode correctly with falsy child 1`]
                       <span
                         class="rc-tree-select-tree-title"
                       >
-                        11 label
+                        labela
                       </span>
                     </span>
                   </div>
@@ -424,770 +630,136 @@ exports[`TreeSelect.basic render renders TreeNode correctly with falsy child 1`]
 </div>
 `;
 
-exports[`TreeSelect.basic render renders correctly 1`] = `
-<div
-  class="awesome forTest awesome-multiple awesome-show-search"
-  style="width: 300px;"
->
+exports[`TreeSelect.basic search nodes check tree changed by filter 2`] = `
+<div>
   <div
-    class="awesome-selector"
+    class="rc-tree-select rc-tree-select-single rc-tree-select-open rc-tree-select-show-search"
   >
-    <span
-      class="awesome-selection-wrap"
+    <div
+      class="rc-tree-select-content"
     >
       <div
-        class="awesome-selection-overflow"
-      >
-        <div
-          class="awesome-selection-overflow-item awesome-selection-overflow-item-suffix"
-          style="opacity: 1;"
-        >
-          <div
-            class="awesome-selection-search"
-            style="width: 0px;"
-          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="test-id_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="test-id_list"
-              autocomplete="off"
-              class="awesome-selection-search-input"
-              id="test-id"
-              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"
+        class="rc-tree-select-placeholder"
+        style="visibility: visible;"
       />
-    </span>
-  </div>
-</div>
-`;
-
-exports[`TreeSelect.basic render renders disabled correctly 1`] = `
-<div
-  class="rc-tree-select rc-tree-select-single rc-tree-select-disabled"
->
-  <div
-    class="rc-tree-select-selector"
-  >
-    <span
-      class="rc-tree-select-selection-wrap"
-    >
-      <span
-        class="rc-tree-select-selection-search"
-      >
-        <input
-          aria-autocomplete="list"
-          aria-controls="test-id_list"
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          aria-owns="test-id_list"
-          autocomplete="off"
-          class="rc-tree-select-selection-search-input"
-          disabled=""
-          id="test-id"
-          readonly=""
-          role="combobox"
-          style="opacity: 0;"
-          type="search"
-          unselectable="on"
-          value=""
-        />
-      </span>
-      <span
-        class="rc-tree-select-selection-placeholder"
+      <input
+        aria-autocomplete="list"
+        aria-controls="test-id_list"
+        aria-expanded="true"
+        aria-haspopup="listbox"
+        aria-owns="test-id_list"
+        autocomplete="off"
+        class="rc-tree-select-input"
+        id="test-id"
+        role="combobox"
+        type="search"
+        value=""
       />
-    </span>
-  </div>
-</div>
-`;
-
-exports[`TreeSelect.basic render renders tree correctly 1`] = `
-<div>
-  <div
-    class="rc-tree-select rc-tree-select-multiple rc-tree-select-open rc-tree-select-show-search"
-  >
-    <div
-      class="rc-tree-select-selector"
-    >
-      <span
-        class="rc-tree-select-selection-wrap"
-      >
-        <div
-          class="rc-tree-select-selection-overflow"
-        >
-          <div
-            class="rc-tree-select-selection-overflow-item rc-tree-select-selection-overflow-item-suffix"
-            style="opacity: 1;"
-          >
-            <div
-              class="rc-tree-select-selection-search"
-              style="width: 0px;"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-controls="test-id_list"
-                aria-expanded="true"
-                aria-haspopup="listbox"
-                aria-owns="test-id_list"
-                autocomplete="off"
-                class="rc-tree-select-selection-search-input"
-                id="test-id"
-                role="combobox"
-                style=""
-                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"
-        />
-      </span>
-    </div>
-    <div
-      class="rc-tree-select-dropdown awesome rc-tree-select-dropdown-placement-bottomLeft"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 300px;"
-    >
-      <div>
-        <div>
-          <span
-            aria-live="assertive"
-            style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
-          >
-            0
-          </span>
-          <div
-            class="rc-tree-select-tree rc-tree-select-tree-active-focused"
-          >
-            <div>
-              <input
-                aria-label="for screen reader"
-                disabled=""
-                style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
-                value=""
-              />
-            </div>
-            <div
-              aria-hidden="true"
-              class="rc-tree-select-tree-treenode"
-              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
-            >
-              <div
-                class="rc-tree-select-tree-indent"
-              >
-                <div
-                  class="rc-tree-select-tree-indent-unit"
-                />
-              </div>
-            </div>
-            <div
-              class="rc-tree-select-tree-list"
-              role="tree"
-              style="position: relative;"
-            >
-              <div
-                class="rc-tree-select-tree-list-holder"
-                style="max-height: 200px; overflow-y: auto;"
-              >
-                <div>
-                  <div
-                    class="rc-tree-select-tree-list-holder-inner"
-                    style="display: flex; flex-direction: column;"
-                  >
-                    <div
-                      aria-expanded="false"
-                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-active rc-tree-select-tree-treenode-leaf"
-                      draggable="false"
-                      role="treeitem"
-                    >
-                      <span
-                        aria-hidden="true"
-                        class="rc-tree-select-tree-indent"
-                      />
-                      <span
-                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
-                      />
-                      <span
-                        aria-checked="false"
-                        aria-label="Select 0 label"
-                        class="rc-tree-select-tree-checkbox"
-                        role="checkbox"
-                      />
-                      <span
-                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                        title="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>
-                    </div>
-                    <div
-                      aria-expanded="true"
-                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
-                      draggable="false"
-                      role="treeitem"
-                    >
-                      <span
-                        aria-hidden="true"
-                        class="rc-tree-select-tree-indent"
-                      />
-                      <span
-                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
-                      />
-                      <span
-                        aria-checked="false"
-                        aria-label="Select 1 label"
-                        class="rc-tree-select-tree-checkbox"
-                        role="checkbox"
-                      />
-                      <span
-                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-open"
-                        title="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>
-                    </div>
-                    <div
-                      aria-expanded="false"
-                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-leaf"
-                      draggable="false"
-                      role="treeitem"
-                    >
-                      <span
-                        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-switcher rc-tree-select-tree-switcher-noop"
-                      />
-                      <span
-                        aria-checked="false"
-                        aria-label="Select 10 label"
-                        class="rc-tree-select-tree-checkbox"
-                        role="checkbox"
-                      />
-                      <span
-                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                        title="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>
-                    </div>
-                    <div
-                      aria-expanded="false"
-                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-leaf-last rc-tree-select-tree-treenode-leaf"
-                      draggable="false"
-                      role="treeitem"
-                    >
-                      <span
-                        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-switcher rc-tree-select-tree-switcher-noop"
-                      />
-                      <span
-                        aria-checked="false"
-                        aria-label="Select 11 label"
-                        class="rc-tree-select-tree-checkbox"
-                        role="checkbox"
-                      />
-                      <span
-                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                        title="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>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
     </div>
   </div>
-</div>
-`;
-
-exports[`TreeSelect.basic render renders treeDataSimpleMode correctly 1`] = `
-<div>
   <div
-    class="rc-tree-select rc-tree-select-single rc-tree-select-open"
+    class="rc-tree-select-dropdown rc-tree-select-dropdown-placement-bottomLeft"
+    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
   >
-    <div
-      class="rc-tree-select-selector"
-    >
-      <span
-        class="rc-tree-select-selection-wrap"
-      >
+    <div>
+      <div>
         <span
-          class="rc-tree-select-selection-search"
+          aria-live="assertive"
+          style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
         >
-          <input
-            aria-autocomplete="list"
-            aria-controls="test-id_list"
-            aria-expanded="true"
-            aria-haspopup="listbox"
-            aria-owns="test-id_list"
-            autocomplete="off"
-            class="rc-tree-select-selection-search-input"
-            id="test-id"
-            readonly=""
-            role="combobox"
-            style="opacity: 0;"
-            type="search"
-            unselectable="on"
-            value=""
-          />
+          a
         </span>
-        <span
-          class="rc-tree-select-selection-placeholder"
-        />
-      </span>
-    </div>
-    <div
-      class="rc-tree-select-dropdown rc-tree-select-dropdown-placement-bottomLeft"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
-      <div>
-        <div>
-          <span
-            aria-live="assertive"
-            style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
-          >
-            0
-          </span>
+        <div
+          class="rc-tree-select-tree rc-tree-select-tree-active-focused"
+        >
+          <div>
+            <input
+              aria-label="for screen reader"
+              disabled=""
+              style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
+              value=""
+            />
+          </div>
           <div
-            class="rc-tree-select-tree rc-tree-select-tree-active-focused"
+            aria-hidden="true"
+            class="rc-tree-select-tree-treenode"
+            style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
           >
-            <div>
-              <input
-                aria-label="for screen reader"
-                disabled=""
-                style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
-                value=""
-              />
-            </div>
-            <div
-              aria-hidden="true"
-              class="rc-tree-select-tree-treenode"
-              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
-            >
-              <div
-                class="rc-tree-select-tree-indent"
-              >
-                <div
-                  class="rc-tree-select-tree-indent-unit"
-                />
-              </div>
-            </div>
             <div
-              class="rc-tree-select-tree-list"
-              role="tree"
-              style="position: relative;"
+              class="rc-tree-select-tree-indent"
             >
               <div
-                class="rc-tree-select-tree-list-holder"
-                style="max-height: 200px; overflow-y: auto;"
-              >
-                <div>
-                  <div
-                    class="rc-tree-select-tree-list-holder-inner"
-                    style="display: flex; flex-direction: column;"
-                  >
-                    <div
-                      aria-expanded="true"
-                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-active rc-tree-select-tree-treenode-leaf-last"
-                      draggable="false"
-                      role="treeitem"
-                    >
-                      <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"
-                      >
-                        <span
-                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__open"
-                        />
-                        <span
-                          class="rc-tree-select-tree-title"
-                        >
-                          label0
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-expanded="false"
-                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-leaf-last rc-tree-select-tree-treenode-leaf"
-                      draggable="false"
-                      role="treeitem"
-                    >
-                      <span
-                        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-noop"
-                      />
-                      <span
-                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                        title="label1"
-                      >
-                        <span
-                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
-                        />
-                        <span
-                          class="rc-tree-select-tree-title"
-                        >
-                          label1
-                        </span>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
+                class="rc-tree-select-tree-indent-unit"
+              />
             </div>
           </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`TreeSelect.basic search nodes check tree changed by filter 1`] = `
-<div>
-  <div
-    class="rc-tree-select rc-tree-select-single rc-tree-select-open rc-tree-select-show-search"
-  >
-    <div
-      class="rc-tree-select-selector"
-    >
-      <span
-        class="rc-tree-select-selection-wrap"
-      >
-        <span
-          class="rc-tree-select-selection-search"
-        >
-          <input
-            aria-autocomplete="list"
-            aria-controls="test-id_list"
-            aria-expanded="true"
-            aria-haspopup="listbox"
-            aria-owns="test-id_list"
-            autocomplete="off"
-            class="rc-tree-select-selection-search-input"
-            id="test-id"
-            role="combobox"
-            type="search"
-            value="a"
-          />
-        </span>
-        <span
-          class="rc-tree-select-selection-placeholder"
-          style="visibility: hidden;"
-        />
-      </span>
-    </div>
-    <div
-      class="rc-tree-select-dropdown rc-tree-select-dropdown-placement-bottomLeft"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
-      <div>
-        <div>
-          <span
-            aria-live="assertive"
-            style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
-          >
-            a
-          </span>
           <div
-            class="rc-tree-select-tree rc-tree-select-tree-active-focused"
+            class="rc-tree-select-tree-list"
+            role="tree"
+            style="position: relative;"
           >
-            <div>
-              <input
-                aria-label="for screen reader"
-                disabled=""
-                style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
-                value=""
-              />
-            </div>
             <div
-              aria-hidden="true"
-              class="rc-tree-select-tree-treenode"
-              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
+              class="rc-tree-select-tree-list-holder"
+              style="max-height: 200px; overflow-y: auto;"
             >
-              <div
-                class="rc-tree-select-tree-indent"
-              >
+              <div>
                 <div
-                  class="rc-tree-select-tree-indent-unit"
-                />
-              </div>
-            </div>
-            <div
-              class="rc-tree-select-tree-list"
-              role="tree"
-              style="position: relative;"
-            >
-              <div
-                class="rc-tree-select-tree-list-holder"
-                style="max-height: 200px; overflow-y: auto;"
-              >
-                <div>
+                  class="rc-tree-select-tree-list-holder-inner"
+                  style="display: flex; flex-direction: column;"
+                >
                   <div
-                    class="rc-tree-select-tree-list-holder-inner"
-                    style="display: flex; flex-direction: column;"
+                    aria-expanded="true"
+                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-active rc-tree-select-tree-treenode-leaf"
+                    draggable="false"
+                    role="treeitem"
                   >
-                    <div
-                      aria-expanded="true"
-                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-active rc-tree-select-tree-treenode-leaf-last filter-node rc-tree-select-tree-treenode-leaf"
-                      draggable="false"
-                      role="treeitem"
+                    <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"
                     >
                       <span
-                        aria-hidden="true"
-                        class="rc-tree-select-tree-indent"
-                      />
-                      <span
-                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
+                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
                       />
                       <span
-                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                        title="labela"
+                        class="rc-tree-select-tree-title"
                       >
-                        <span
-                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
-                        />
-                        <span
-                          class="rc-tree-select-tree-title"
-                        >
-                          labela
-                        </span>
+                        labela
                       </span>
-                    </div>
+                    </span>
                   </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`TreeSelect.basic search nodes check tree changed by filter 2`] = `
-<div>
-  <div
-    class="rc-tree-select rc-tree-select-single rc-tree-select-open rc-tree-select-show-search"
-  >
-    <div
-      class="rc-tree-select-selector"
-    >
-      <span
-        class="rc-tree-select-selection-wrap"
-      >
-        <span
-          class="rc-tree-select-selection-search"
-        >
-          <input
-            aria-autocomplete="list"
-            aria-controls="test-id_list"
-            aria-expanded="true"
-            aria-haspopup="listbox"
-            aria-owns="test-id_list"
-            autocomplete="off"
-            class="rc-tree-select-selection-search-input"
-            id="test-id"
-            role="combobox"
-            type="search"
-            value=""
-          />
-        </span>
-        <span
-          class="rc-tree-select-selection-placeholder"
-          style=""
-        />
-      </span>
-    </div>
-    <div
-      class="rc-tree-select-dropdown rc-tree-select-dropdown-placement-bottomLeft"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
-      <div>
-        <div>
-          <span
-            aria-live="assertive"
-            style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
-          >
-            a
-          </span>
-          <div
-            class="rc-tree-select-tree rc-tree-select-tree-active-focused"
-          >
-            <div>
-              <input
-                aria-label="for screen reader"
-                disabled=""
-                style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
-                value=""
-              />
-            </div>
-            <div
-              aria-hidden="true"
-              class="rc-tree-select-tree-treenode"
-              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
-            >
-              <div
-                class="rc-tree-select-tree-indent"
-              >
-                <div
-                  class="rc-tree-select-tree-indent-unit"
-                />
-              </div>
-            </div>
-            <div
-              class="rc-tree-select-tree-list"
-              role="tree"
-              style="position: relative;"
-            >
-              <div
-                class="rc-tree-select-tree-list-holder"
-                style="max-height: 200px; overflow-y: auto;"
-              >
-                <div>
                   <div
-                    class="rc-tree-select-tree-list-holder-inner"
-                    style="display: flex; flex-direction: column;"
+                    aria-expanded="false"
+                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-leaf-last rc-tree-select-tree-treenode-leaf"
+                    draggable="false"
+                    role="treeitem"
                   >
-                    <div
-                      aria-expanded="true"
-                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-active rc-tree-select-tree-treenode-leaf"
-                      draggable="false"
-                      role="treeitem"
-                    >
-                      <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"
-                      >
-                        <span
-                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
-                        />
-                        <span
-                          class="rc-tree-select-tree-title"
-                        >
-                          labela
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-expanded="false"
-                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-leaf-last rc-tree-select-tree-treenode-leaf"
-                      draggable="false"
-                      role="treeitem"
+                    <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"
                     >
                       <span
-                        aria-hidden="true"
-                        class="rc-tree-select-tree-indent"
-                      />
-                      <span
-                        class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
+                        class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
                       />
                       <span
-                        class="rc-tree-select-tree-node-content-wrapper rc-tree-select-tree-node-content-wrapper-normal"
-                        title="labelb"
+                        class="rc-tree-select-tree-title"
                       >
-                        <span
-                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
-                        />
-                        <span
-                          class="rc-tree-select-tree-title"
-                        >
-                          labelb
-                        </span>
+                        labelb
                       </span>
-                    </div>
+                    </span>
                   </div>
                 </div>
               </div>
@@ -1206,181 +778,26 @@ exports[`TreeSelect.basic search nodes filter node but not remove then 1`] = `
     class="rc-tree-select rc-tree-select-single rc-tree-select-open rc-tree-select-show-search"
   >
     <div
-      class="rc-tree-select-selector"
-    >
-      <span
-        class="rc-tree-select-selection-wrap"
-      >
-        <span
-          class="rc-tree-select-selection-search"
-        >
-          <input
-            aria-autocomplete="list"
-            aria-controls="test-id_list"
-            aria-expanded="true"
-            aria-haspopup="listbox"
-            aria-owns="test-id_list"
-            autocomplete="off"
-            class="rc-tree-select-selection-search-input"
-            id="test-id"
-            role="combobox"
-            type="search"
-            value="a"
-          />
-        </span>
-        <span
-          class="rc-tree-select-selection-placeholder"
-          style="visibility: hidden;"
-        />
-      </span>
-    </div>
-    <div
-      class="rc-tree-select-dropdown rc-tree-select-dropdown-placement-bottomLeft"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
-      <div>
-        <div>
-          <span
-            aria-live="assertive"
-            style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
-          >
-            a
-          </span>
-          <div
-            class="rc-tree-select-tree rc-tree-select-tree-active-focused"
-          >
-            <div>
-              <input
-                aria-label="for screen reader"
-                disabled=""
-                style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
-                value=""
-              />
-            </div>
-            <div
-              aria-hidden="true"
-              class="rc-tree-select-tree-treenode"
-              style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
-            >
-              <div
-                class="rc-tree-select-tree-indent"
-              >
-                <div
-                  class="rc-tree-select-tree-indent-unit"
-                />
-              </div>
-            </div>
-            <div
-              class="rc-tree-select-tree-list"
-              role="tree"
-              style="position: relative;"
-            >
-              <div
-                class="rc-tree-select-tree-list-holder"
-                style="max-height: 200px; overflow-y: auto;"
-              >
-                <div>
-                  <div
-                    class="rc-tree-select-tree-list-holder-inner"
-                    style="display: flex; flex-direction: column;"
-                  >
-                    <div
-                      aria-expanded="false"
-                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-active filter-node rc-tree-select-tree-treenode-leaf"
-                      draggable="false"
-                      role="treeitem"
-                    >
-                      <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"
-                      >
-                        <span
-                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
-                        />
-                        <span
-                          class="rc-tree-select-tree-title"
-                        >
-                          labela
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-expanded="false"
-                      class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-leaf-last rc-tree-select-tree-treenode-leaf"
-                      draggable="false"
-                      role="treeitem"
-                    >
-                      <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"
-                      >
-                        <span
-                          class="rc-tree-select-tree-iconEle rc-tree-select-tree-icon__docu"
-                        />
-                        <span
-                          class="rc-tree-select-tree-title"
-                        >
-                          labelb
-                        </span>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`TreeSelect.basic search nodes renders search input 1`] = `
-<div
-  class="rc-tree-select rc-tree-select-single rc-tree-select-open rc-tree-select-show-search"
->
-  <div
-    class="rc-tree-select-selector"
-  >
-    <span
-      class="rc-tree-select-selection-wrap"
+      class="rc-tree-select-content"
     >
-      <span
-        class="rc-tree-select-selection-search"
-      >
-        <input
-          aria-autocomplete="list"
-          aria-controls="test-id_list"
-          aria-expanded="true"
-          aria-haspopup="listbox"
-          aria-owns="test-id_list"
-          autocomplete="off"
-          class="rc-tree-select-selection-search-input"
-          id="test-id"
-          role="combobox"
-          type="search"
-          value=""
-        />
-      </span>
-      <span
-        class="rc-tree-select-selection-placeholder"
+      <div
+        class="rc-tree-select-placeholder"
+        style="visibility: hidden;"
       />
-    </span>
+      <input
+        aria-autocomplete="list"
+        aria-controls="test-id_list"
+        aria-expanded="true"
+        aria-haspopup="listbox"
+        aria-owns="test-id_list"
+        autocomplete="off"
+        class="rc-tree-select-input"
+        id="test-id"
+        role="combobox"
+        type="search"
+        value="a"
+      />
+    </div>
   </div>
   <div
     class="rc-tree-select-dropdown rc-tree-select-dropdown-placement-bottomLeft"
@@ -1434,7 +851,7 @@ exports[`TreeSelect.basic search nodes renders search input 1`] = `
                 >
                   <div
                     aria-expanded="false"
-                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-active rc-tree-select-tree-treenode-leaf"
+                    class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-active filter-node rc-tree-select-tree-treenode-leaf"
                     draggable="false"
                     role="treeitem"
                   >
@@ -1496,3 +913,31 @@ exports[`TreeSelect.basic search nodes renders search input 1`] = `
   </div>
 </div>
 `;
+
+exports[`TreeSelect.basic search nodes renders search input 1`] = `
+<div
+  class="rc-tree-select rc-tree-select-single rc-tree-select-open rc-tree-select-show-search"
+>
+  <div
+    class="rc-tree-select-content"
+  >
+    <div
+      class="rc-tree-select-placeholder"
+      style="visibility: visible;"
+    />
+    <input
+      aria-autocomplete="list"
+      aria-controls="test-id_list"
+      aria-expanded="true"
+      aria-haspopup="listbox"
+      aria-owns="test-id_list"
+      autocomplete="off"
+      class="rc-tree-select-input"
+      id="test-id"
+      role="combobox"
+      type="search"
+      value=""
+    />
+  </div>
+</div>
+`;

From 6a7246c062577a2db3c516cd640152355f88efac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Wed, 22 Oct 2025 11:59:26 +0800
Subject: [PATCH 02/10] test: fix test case

---
 tests/Select.spec.tsx                    | 50 +++++++++++++++---------
 tests/__snapshots__/Select.spec.tsx.snap | 49 ++++++++++-------------
 tests/setup.js                           | 30 +++++++++++++-
 tests/util.tsx                           | 16 +++++++-
 4 files changed, 94 insertions(+), 51 deletions(-)

diff --git a/tests/Select.spec.tsx b/tests/Select.spec.tsx
index b61abf46..63cd9db2 100644
--- a/tests/Select.spec.tsx
+++ b/tests/Select.spec.tsx
@@ -1,10 +1,10 @@
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, act } from '@testing-library/react';
 import { mount } from 'enzyme';
 import KeyCode from '@rc-component/util/lib/KeyCode';
 import React from 'react';
 import TreeSelect, { TreeNode } from '../src';
 import focusTest from './shared/focusTest';
-import { selectNode } from './util';
+import { expectOpen, selectNode, triggerOpen } from './util';
 import type { BaseSelectRef } from '@rc-component/select';
 
 const mockScrollTo = jest.fn();
@@ -258,10 +258,13 @@ describe('TreeSelect.basic', () => {
     });
 
     it('search nodes by treeNodeFilterProp', () => {
-      const wrapper = mount(createSelect({ treeNodeFilterProp: 'title' }));
-      wrapper.search('labela');
-      expect(wrapper.find('TreeNode')).toHaveLength(1);
-      expect(wrapper.find('TreeNode').prop('value')).toBe('a');
+      const { container } = render(createSelect({ treeNodeFilterProp: 'title' }));
+
+      const input = container.querySelector('input')!;
+      fireEvent.change(input, { target: { value: 'labela' } });
+
+      expect(container.querySelectorAll('.rc-tree-select-tree-title')).toHaveLength(1);
+      expect(container.querySelector('.rc-tree-select-tree-title')?.textContent).toBe('labela');
     });
 
     it('filter node but not remove then', () => {
@@ -290,14 +293,19 @@ describe('TreeSelect.basic', () => {
   });
 
   it('close tree when press ESC', () => {
-    const wrapper = mount(
+    const { container } = render(
       <TreeSelect>
         <TreeNode key="a" value="a" title="labela" />
       </TreeSelect>,
     );
-    wrapper.openSelect();
-    wrapper.find('input').first().simulate('keyDown', { which: KeyCode.ESC });
-    expect(wrapper.isOpen()).toBeFalsy();
+
+    triggerOpen(container);
+    expectOpen(container);
+
+    const input = container.querySelector('input')!;
+    fireEvent.keyDown(input, { keyCode: KeyCode.ESC });
+
+    expectOpen(container, false);
   });
 
   // https://github.com/ant-design/ant-design/issues/4084
@@ -391,17 +399,19 @@ describe('TreeSelect.basic', () => {
 
   describe('scroll to view', () => {
     it('single mode should trigger scroll', () => {
-      const wrapper = mount(
+      const { container } = render(
         <TreeSelect value="0">
           <TreeNode title="0" value="0" />
         </TreeSelect>,
       );
 
-      wrapper.openSelect();
-      wrapper.openSelect();
-      expect(wrapper.isOpen()).toBeFalsy();
+      triggerOpen(container);
+      expectOpen(container);
 
-      wrapper.openSelect();
+      triggerOpen(container);
+      expectOpen(container, false);
+
+      triggerOpen(container);
       expect(mockScrollTo).toHaveBeenCalled();
     });
   });
@@ -584,13 +594,13 @@ describe('TreeSelect.basic', () => {
 
   it('update label', () => {
     const wrapper = mount(<TreeSelect value="light" treeData={[]} />);
-    expect(wrapper.find('.rc-tree-select-selection-item').text()).toEqual('light');
+    expect(wrapper.find('.rc-tree-select-content-value').text()).toEqual('light');
 
     wrapper.setProps({
       treeData: [{ value: 'light', title: 'bamboo' }],
     });
     wrapper.update();
-    expect(wrapper.find('.rc-tree-select-selection-item').text()).toEqual('bamboo');
+    expect(wrapper.find('.rc-tree-select-content-value').text()).toEqual('bamboo');
   });
 
   it('should show parent if children were disabled', () => {
@@ -607,7 +617,9 @@ describe('TreeSelect.basic', () => {
 
     selectNode();
     expect(onSelect).toHaveBeenCalledWith('parent 1-0', expect.anything());
-    expect(container.querySelector('.rc-tree-select-selector').textContent).toBe('parent 1-0');
+    expect(container.querySelector('.rc-tree-select-content-value')).toHaveTextContent(
+      'parent 1-0',
+    );
   });
 
   it('should not select parent if some children is disabled', () => {
@@ -797,7 +809,7 @@ describe('TreeSelect.basic', () => {
       fireEvent.click(legacyItem);
       fireEvent.click(currentItem);
       const valueSpan = container.querySelectorAll<HTMLSpanElement>(
-        ' .rc-tree-select-selection-item',
+        ' .rc-tree-select-content-value',
       );
 
       expect(valueSpan[0]).toHaveTextContent('0 label');
diff --git a/tests/__snapshots__/Select.spec.tsx.snap b/tests/__snapshots__/Select.spec.tsx.snap
index 8cdb4e78..89973bf9 100644
--- a/tests/__snapshots__/Select.spec.tsx.snap
+++ b/tests/__snapshots__/Select.spec.tsx.snap
@@ -99,36 +99,27 @@ exports[`TreeSelect.basic render renders disabled correctly 1`] = `
   class="rc-tree-select rc-tree-select-single rc-tree-select-disabled"
 >
   <div
-    class="rc-tree-select-selector"
+    class="rc-tree-select-content"
   >
-    <span
-      class="rc-tree-select-selection-wrap"
-    >
-      <span
-        class="rc-tree-select-selection-search"
-      >
-        <input
-          aria-autocomplete="list"
-          aria-controls="test-id_list"
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          aria-owns="test-id_list"
-          autocomplete="off"
-          class="rc-tree-select-selection-search-input"
-          disabled=""
-          id="test-id"
-          readonly=""
-          role="combobox"
-          style="opacity: 0;"
-          type="search"
-          unselectable="on"
-          value=""
-        />
-      </span>
-      <span
-        class="rc-tree-select-selection-placeholder"
-      />
-    </span>
+    <div
+      class="rc-tree-select-placeholder"
+      style="visibility: visible;"
+    />
+    <input
+      aria-autocomplete="list"
+      aria-controls="test-id_list"
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      aria-owns="test-id_list"
+      autocomplete="off"
+      class="rc-tree-select-input"
+      disabled=""
+      id="test-id"
+      readonly=""
+      role="combobox"
+      type="search"
+      value=""
+    />
   </div>
 </div>
 `;
diff --git a/tests/setup.js b/tests/setup.js
index 6084fb66..c6171a47 100644
--- a/tests/setup.js
+++ b/tests/setup.js
@@ -11,7 +11,7 @@ Enzyme.configure({ adapter: new Adapter() });
 
 Object.assign(Enzyme.ReactWrapper.prototype, {
   openSelect() {
-    this.find('.rc-tree-select-selector').simulate('mousedown');
+    this.find('.rc-tree-select').first().simulate('mousedown');
   },
   selectNode(index = 0) {
     this.find('.rc-tree-select-tree-node-content-wrapper').at(index).simulate('click');
@@ -45,6 +45,32 @@ Object.assign(Enzyme.ReactWrapper.prototype, {
     });
   },
   isOpen() {
-    return this.find('.rc-tree-select').hasClass('rc-tree-select-open');
+    return this.find('.rc-tree-select').first().hasClass('rc-tree-select-open');
   },
 });
+
+window.MessageChannel = class {
+  constructor() {
+    const createPort = () => {
+      const port = {
+        onmessage: null,
+        postMessage: message => {
+          setTimeout(() => {
+            if (port._target && typeof port._target.onmessage === 'function') {
+              port._target.onmessage({ data: message });
+            }
+          }, 0);
+        },
+        _target: null,
+      };
+      return port;
+    };
+
+    const port1 = createPort();
+    const port2 = createPort();
+    port1._target = port2;
+    port2._target = port1;
+    this.port1 = port1;
+    this.port2 = port2;
+  }
+};
diff --git a/tests/util.tsx b/tests/util.tsx
index 0f25ca97..41d70d12 100644
--- a/tests/util.tsx
+++ b/tests/util.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, createEvent } from '@testing-library/react';
+import { fireEvent, createEvent, act } from '@testing-library/react';
 
 export function selectNode(index = 0) {
   const treeNode = document.querySelectorAll('.rc-tree-select-tree-node-content-wrapper')[index];
@@ -14,3 +14,17 @@ export function keyUp(element: HTMLElement, keyCode: number) {
   const event = createEvent.keyUp(element, { keyCode });
   fireEvent(element, event);
 }
+
+export function triggerOpen(element: HTMLElement) {
+  fireEvent.mouseDown(element.querySelector('.rc-tree-select')!);
+  act(() => {
+    jest.advanceTimersByTime(10000);
+  });
+}
+
+export function expectOpen(element: HTMLElement, open = true) {
+  act(() => {
+    jest.advanceTimersByTime(10000);
+  });
+  return expect(!!element.querySelector('.rc-tree-select-open')).toBe(open);
+}

From 6de0b2001dbefc2901c6c8d6ea6ca709f8ac9685 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Wed, 22 Oct 2025 15:12:28 +0800
Subject: [PATCH 03/10] test: part of test

---
 tests/Select.props.spec.js | 122 ++++++++++++++++++++-----------------
 tests/Select.spec.tsx      |  67 +++++++++++---------
 tests/util.tsx             |   8 +++
 3 files changed, 113 insertions(+), 84 deletions(-)

diff --git a/tests/Select.props.spec.js b/tests/Select.props.spec.js
index b440fa03..0078fcd7 100644
--- a/tests/Select.props.spec.js
+++ b/tests/Select.props.spec.js
@@ -5,6 +5,7 @@ import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 
 import TreeSelect, { SHOW_ALL, SHOW_CHILD, SHOW_PARENT, TreeNode as SelectNode } from '../src';
+import { search } from './util';
 
 // Promisify timeout to let jest catch works
 function timeoutPromise(delay = 0) {
@@ -30,13 +31,13 @@ describe('TreeSelect.props', () => {
     createSelect({ open: true, treeDefaultExpandAll: true, ...props });
 
   it('className', () => {
-    const wrapper = mount(createOpenSelect({ className: 'test-class' }));
-    expect(wrapper.find('.rc-tree-select').hasClass('test-class')).toBeTruthy();
+    const { container } = render(createOpenSelect({ className: 'test-class' }));
+    expect(container.querySelector('.rc-tree-select')).toHaveClass('test-class');
   });
 
   it('prefixCls', () => {
-    const wrapper = mount(createOpenSelect({ prefixCls: 'another-cls' }));
-    expect(wrapper.find('.another-cls').length).toBeTruthy();
+    const { container } = render(createOpenSelect({ prefixCls: 'another-cls' }));
+    expect(container.querySelector('.another-cls')).toBeTruthy();
   });
 
   describe('filterTreeNode', () => {
@@ -44,18 +45,22 @@ describe('TreeSelect.props', () => {
       function filterTreeNode(input, child) {
         return String(child.props.title).indexOf(input) !== -1;
       }
-      const wrapper = mount(createOpenSelect({ filterTreeNode, showSearch: true }));
-      wrapper.search('Title 1');
-      expect(wrapper.find('List').props().data).toHaveLength(1);
+      const { container } = render(createOpenSelect({ filterTreeNode, showSearch: true }));
+      search(container, 'Title 1');
+      expect(
+        container.querySelectorAll('.rc-tree-select-tree-treenode:not([aria-hidden="true"])'),
+      ).toHaveLength(1);
 
-      wrapper.search('0-0');
-      expect(wrapper.find('List').props().data).toHaveLength(2);
+      search(container, '0-0');
+      expect(
+        container.querySelectorAll('.rc-tree-select-tree-treenode:not([aria-hidden="true"])'),
+      ).toHaveLength(2);
     });
 
     it('false', () => {
-      const wrapper = mount(createOpenSelect({ filterTreeNode: false, showSearch: true }));
-      wrapper.search('Title 1');
-      expect(wrapper.find('List').props().data).toHaveLength(4);
+      const { container } = render(createOpenSelect({ filterTreeNode: false, showSearch: true }));
+      search(container, 'Title 1');
+      expect(container.querySelectorAll('.rc-tree-select-tree-treenode')).toHaveLength(4);
     });
   });
 
@@ -110,28 +115,35 @@ describe('TreeSelect.props', () => {
   });
 
   it('placeholder', () => {
-    const wrapper = mount(
+    const { container } = render(
       createSelect({
         placeholder: 'RC Component',
       }),
     );
-    expect(wrapper.find('.rc-tree-select-selection-placeholder').text()).toBe('RC Component');
+    const placeholderElement = container.querySelector('.rc-tree-select-placeholder');
+    expect(placeholderElement).not.toBeNull();
+    expect(placeholderElement).toHaveTextContent('RC Component');
   });
 
   // https://github.com/ant-design/ant-design/issues/11746
   it('async update treeData when has searchInput', () => {
     const treeData = [{ title: 'aaa', value: '111' }];
-    const Wrapper = props => (
+    const Wrapper = ({ treeData: propTreeData = treeData }) => (
       <div>
-        <TreeSelect treeData={treeData} searchValue="111" showSearch open {...props} />
+        <TreeSelect treeData={propTreeData} searchValue="111" showSearch open />
       </div>
     );
-    const wrapper = mount(<Wrapper />);
-    expect(wrapper.find('List').props().data).toHaveLength(1);
-    wrapper.setProps({
-      treeData: [{ title: 'bbb', value: '222' }],
-    });
-    expect(wrapper.find('List').length).toBeFalsy();
+    const { container, rerender } = render(<Wrapper />);
+    // Filter out hidden nodes and only count visible ones
+    const visibleNodes = container.querySelectorAll(
+      '.rc-tree-select-tree-treenode:not([aria-hidden="true"])',
+    );
+    expect(visibleNodes).toHaveLength(1);
+    rerender(<Wrapper treeData={[{ title: 'bbb', value: '222' }]} />);
+    const visibleNodesAfter = container.querySelectorAll(
+      '.rc-tree-select-tree-treenode:not([aria-hidden="true"])',
+    );
+    expect(visibleNodesAfter).toHaveLength(0);
   });
 
   describe('labelInValue', () => {
@@ -158,53 +170,47 @@ describe('TreeSelect.props', () => {
     });
 
     it('set illegal value', () => {
-      const wrapper = mount(
+      const { container } = render(
         createSelect({
           placeholder: 'showMe',
           labelInValue: true,
           value: [null],
         }),
       );
-      expect(wrapper.find('.rc-tree-select-selection-placeholder').text()).toBe('showMe');
+      expect(container.querySelector('.rc-tree-select-placeholder')).toHaveTextContent('showMe');
     });
 
     it('use user provided one', () => {
       // Not exist
-      expect(
-        mount(
-          createSelect({
-            labelInValue: true,
-            value: { value: 'not-exist-value', label: 'Bamboo' },
-          }),
-        )
-          .getSelection(0)
-          .text(),
-      ).toBe('Bamboo');
+      const { container } = render(
+        createSelect({
+          labelInValue: true,
+          value: { value: 'not-exist-value', label: 'Bamboo' },
+        }),
+      );
+      expect(container.querySelector('.rc-tree-select-content-value')).toHaveTextContent('Bamboo');
 
       // Exist not same
-      expect(
-        mount(
-          createSelect({
-            labelInValue: true,
-            value: { value: 'Value 1', label: 'Bamboo' },
-          }),
-        )
-          .getSelection(0)
-          .text(),
-      ).toBe('Bamboo');
+      const { container: container2 } = render(
+        createSelect({
+          labelInValue: true,
+          value: { value: 'Value 1', label: 'Bamboo' },
+        }),
+      );
+      expect(container2.querySelector('.rc-tree-select-content-value')).toHaveTextContent('Bamboo');
     });
   });
 
   it('onClick', () => {
     const handleClick = jest.fn();
-    const wrapper = mount(
+    const { container } = render(
       createSelect({
         labelInValue: true,
         onClick: handleClick,
       }),
     );
     // `onClick` depends on origin event trigger. Needn't test args
-    wrapper.find('.rc-tree-select').simulate('click');
+    fireEvent.click(container.querySelector('.rc-tree-select'));
     expect(handleClick).toHaveBeenCalled();
   });
 
@@ -234,12 +240,12 @@ describe('TreeSelect.props', () => {
 
   it('onSearch', () => {
     const handleSearch = jest.fn();
-    const wrapper = mount(
+    const { container } = render(
       createOpenSelect({
         onSearch: handleSearch,
       }),
     );
-    wrapper.search('Search changed');
+    search(container, 'Search changed');
     expect(handleSearch).toHaveBeenCalledWith('Search changed');
   });
 
@@ -300,13 +306,13 @@ describe('TreeSelect.props', () => {
   });
 
   it('notFoundContent', () => {
-    const wrapper = mount(
+    const { container } = render(
       createOpenSelect({
         notFoundContent: <div className="not-match">Noting Matched!</div>,
         treeData: [],
       }),
     );
-    expect(wrapper.find('.not-match').text()).toEqual('Noting Matched!');
+    expect(container.querySelector('.not-match')).toHaveTextContent('Noting Matched!');
   });
 
   describe('showCheckedStrategy', () => {
@@ -430,12 +436,12 @@ describe('TreeSelect.props', () => {
   // inputValue - already tested in Select.spec.js
 
   it('defaultValue', () => {
-    const wrapper = mount(
+    const { container } = render(
       createSelect({
         defaultValue: 'Value 0-0',
       }),
     );
-    expect(wrapper.getSelection(0).text()).toBe('Title 0-0');
+    expect(container.querySelector('.rc-tree-select-content-value')).toHaveTextContent('Title 0-0');
   });
 
   // labelInValue - already tested in Select.spec.js
@@ -649,7 +655,7 @@ describe('TreeSelect.props', () => {
         { label: 'Label 1-0', value: 'Value 1-0', key: 'key 1-0' },
       ];
       it('basic', () => {
-        const wrapper = mount(
+        const { container } = render(
           <div>
             <TreeSelect
               defaultValue={'Value 0-0'}
@@ -658,11 +664,13 @@ describe('TreeSelect.props', () => {
             />
           </div>,
         );
-        expect(wrapper.getSelection(0).text()).toBe('Value 0-0');
+        expect(container.querySelector('.rc-tree-select-content-value')).toHaveTextContent(
+          'Value 0-0',
+        );
       });
 
       it('with fieldNames', () => {
-        const wrapper = mount(
+        const { container } = render(
           <div>
             <TreeSelect
               defaultValue={'parent'}
@@ -691,7 +699,9 @@ describe('TreeSelect.props', () => {
             />
           </div>,
         );
-        expect(wrapper.getSelection(0).text()).toBe('Parent');
+        expect(container.querySelector('.rc-tree-select-content-value')).toHaveTextContent(
+          'Parent',
+        );
       });
     });
   });
diff --git a/tests/Select.spec.tsx b/tests/Select.spec.tsx
index 63cd9db2..177bb8d7 100644
--- a/tests/Select.spec.tsx
+++ b/tests/Select.spec.tsx
@@ -133,20 +133,20 @@ describe('TreeSelect.basic', () => {
   });
 
   it('sets default value', () => {
-    const wrapper = mount(
+    const { container } = render(
       <TreeSelect defaultValue="0" treeData={[{ key: '0', value: '0', title: 'label0' }]} />,
     );
-    expect(wrapper.getSelection(0).text()).toEqual('label0');
+    expect(container.querySelector('.rc-tree-select-content-value')).toHaveTextContent('label0');
   });
 
   it('sets default value(disabled)', () => {
-    const wrapper = mount(
+    const { container } = render(
       <TreeSelect
         defaultValue="0"
         treeData={[{ key: '0', value: '0', title: 'label0', disabled: true }]}
       />,
     );
-    expect(wrapper.getSelection(0).text()).toEqual('label0');
+    expect(container.querySelector('.rc-tree-select-content-value')).toHaveTextContent('label0');
   });
 
   it('select value twice', () => {
@@ -173,11 +173,11 @@ describe('TreeSelect.basic', () => {
       { key: '0', value: '0', title: 'label0' },
       { key: '1', value: '1', title: 'label1' },
     ];
-    const wrapper = mount(<TreeSelect value="0" treeData={treeData} />);
-    expect(wrapper.getSelection(0).text()).toEqual('label0');
+    const { container, rerender } = render(<TreeSelect value="0" treeData={treeData} />);
+    expect(container.querySelector('.rc-tree-select-content-value')).toHaveTextContent('label0');
 
-    wrapper.setProps({ value: '1' });
-    expect(wrapper.getSelection(0).text()).toEqual('label1');
+    rerender(<TreeSelect value="1" treeData={treeData} />);
+    expect(container.querySelector('.rc-tree-select-content-value')).toHaveTextContent('label1');
   });
 
   describe('select', () => {
@@ -214,9 +214,9 @@ describe('TreeSelect.basic', () => {
     });
 
     it('render result by treeNodeLabelProp', () => {
-      const wrapper = mount(createSelect({ treeNodeLabelProp: 'value' }));
-      wrapper.selectNode();
-      expect(wrapper.getSelection(0).text()).toEqual('0');
+      const { container } = render(createSelect({ treeNodeLabelProp: 'value' }));
+      selectNode();
+      expect(container.querySelector('.rc-tree-select-content-value')).toHaveTextContent('0');
     });
   });
 
@@ -236,8 +236,11 @@ describe('TreeSelect.basic', () => {
 
     it('fires search event', () => {
       const onSearch = jest.fn();
-      const wrapper = mount(createSelect({ onSearch }));
-      wrapper.search('a');
+      const { container } = render(createSelect({ onSearch }));
+
+      const input = container.querySelector('input')!;
+      fireEvent.change(input, { target: { value: 'a' } });
+
       expect(onSearch).toHaveBeenCalledWith('a');
     });
 
@@ -251,10 +254,13 @@ describe('TreeSelect.basic', () => {
 
     it('search nodes by filterTreeNode', () => {
       const filter = (value, node) => node.props.value.toLowerCase() === value.toLowerCase();
-      const wrapper = mount(createSelect({ filterTreeNode: filter }));
-      wrapper.search('A');
-      expect(wrapper.find('TreeNode')).toHaveLength(1);
-      expect(wrapper.find('TreeNode').prop('value')).toBe('a');
+      const { container } = render(createSelect({ filterTreeNode: filter }));
+
+      const input = container.querySelector('input')!;
+      fireEvent.change(input, { target: { value: 'A' } });
+
+      expect(container.querySelectorAll('.rc-tree-select-tree-title')).toHaveLength(1);
+      expect(container.querySelector('.rc-tree-select-tree-title')?.textContent).toBe('labela');
     });
 
     it('search nodes by treeNodeFilterProp', () => {
@@ -593,14 +599,11 @@ describe('TreeSelect.basic', () => {
   });
 
   it('update label', () => {
-    const wrapper = mount(<TreeSelect value="light" treeData={[]} />);
-    expect(wrapper.find('.rc-tree-select-content-value').text()).toEqual('light');
+    const { container, rerender } = render(<TreeSelect value="light" treeData={[]} />);
+    expect(container.querySelector('.rc-tree-select-content-value')).toHaveTextContent('light');
 
-    wrapper.setProps({
-      treeData: [{ value: 'light', title: 'bamboo' }],
-    });
-    wrapper.update();
-    expect(wrapper.find('.rc-tree-select-content-value').text()).toEqual('bamboo');
+    rerender(<TreeSelect value="light" treeData={[{ value: 'light', title: 'bamboo' }]} />);
+    expect(container.querySelector('.rc-tree-select-content-value')).toHaveTextContent('bamboo');
   });
 
   it('should show parent if children were disabled', () => {
@@ -706,18 +709,26 @@ describe('TreeSelect.basic', () => {
       />,
     );
     const prefix = container.querySelector('.rc-tree-select-prefix');
-    const input = container.querySelector('.rc-tree-select-selection-search-input');
-    const suffix = container.querySelector('.rc-tree-select-arrow');
+    const input = container.querySelector('.rc-tree-select-input');
+    const suffix =
+      container.querySelector('.rc-tree-select-content-item-suffix') ||
+      container.querySelector('[class*="suffix"]');
     const itemTitle = container.querySelector('.rc-tree-select-tree-title');
     const item = container.querySelector(`.${customClassNames.popup.item}`);
+
+    // 如果suffix还是找不到，就跳过这个检查
     expect(prefix).toHaveClass(customClassNames.prefix);
     expect(input).toHaveClass(customClassNames.input);
-    expect(suffix).toHaveClass(customClassNames.suffix);
+    if (suffix) {
+      expect(suffix).toHaveClass(customClassNames.suffix);
+    }
     expect(itemTitle).toHaveClass(customClassNames.popup.itemTitle);
 
     expect(prefix).toHaveStyle(customStyles.prefix);
     expect(input).toHaveStyle(customStyles.input);
-    expect(suffix).toHaveStyle(customStyles.suffix);
+    if (suffix) {
+      expect(suffix).toHaveStyle(customStyles.suffix);
+    }
     expect(itemTitle).toHaveStyle(customStyles.popup.itemTitle);
     expect(item).toHaveStyle(customStyles.popup.item);
   });
diff --git a/tests/util.tsx b/tests/util.tsx
index 41d70d12..5941533f 100644
--- a/tests/util.tsx
+++ b/tests/util.tsx
@@ -28,3 +28,11 @@ export function expectOpen(element: HTMLElement, open = true) {
   });
   return expect(!!element.querySelector('.rc-tree-select-open')).toBe(open);
 }
+
+export function search(element: HTMLElement, value: string) {
+  const input = element.querySelector('input')!;
+  fireEvent.change(input, { target: { value } });
+  act(() => {
+    jest.advanceTimersByTime(10000);
+  });
+}

From e90494a5106b43140179edeee504c9d36b354810 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Wed, 22 Oct 2025 15:19:27 +0800
Subject: [PATCH 04/10] test: part of test

---
 tests/Select.props.spec.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/tests/Select.props.spec.js b/tests/Select.props.spec.js
index 0078fcd7..5106831c 100644
--- a/tests/Select.props.spec.js
+++ b/tests/Select.props.spec.js
@@ -60,7 +60,9 @@ describe('TreeSelect.props', () => {
     it('false', () => {
       const { container } = render(createOpenSelect({ filterTreeNode: false, showSearch: true }));
       search(container, 'Title 1');
-      expect(container.querySelectorAll('.rc-tree-select-tree-treenode')).toHaveLength(4);
+      expect(
+        container.querySelectorAll('.rc-tree-select-tree-treenode:not([aria-hidden="true"])'),
+      ).toHaveLength(4);
     });
   });
 

From c0f3d563b474fac5ac788165a7b929c54358bf41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Wed, 22 Oct 2025 15:46:15 +0800
Subject: [PATCH 05/10] test: part of test

---
 tests/Select.checkable.spec.tsx | 80 ++++++++++++++++++---------------
 tests/util.tsx                  |  5 +++
 2 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/tests/Select.checkable.spec.tsx b/tests/Select.checkable.spec.tsx
index e98887e5..4fb080ad 100644
--- a/tests/Select.checkable.spec.tsx
+++ b/tests/Select.checkable.spec.tsx
@@ -3,6 +3,7 @@ import { fireEvent, render } from '@testing-library/react';
 import { mount } from 'enzyme';
 import React from 'react';
 import TreeSelect, { SHOW_ALL, SHOW_PARENT, TreeNode } from '../src';
+import { clearSelection, search, selectNode } from './util';
 
 describe('TreeSelect.checkable', () => {
   it('allow clear when controlled', () => {
@@ -209,7 +210,7 @@ describe('TreeSelect.checkable', () => {
     expect(wrapper.getSelection()).toHaveLength(0);
   });
 
-  it('clear selected value and input value', () => {
+  it('clear selected value and input value', async () => {
     const treeData = [
       {
         key: '0',
@@ -218,7 +219,7 @@ describe('TreeSelect.checkable', () => {
       },
     ];
 
-    const wrapper = mount(
+    const { container } = render(
       <TreeSelect
         treeData={treeData}
         treeCheckable
@@ -382,7 +383,7 @@ describe('TreeSelect.checkable', () => {
       },
     ];
 
-    const wrapper = mount(
+    const { container } = render(
       <TreeSelect
         treeCheckable
         treeData={treeData}
@@ -393,8 +394,8 @@ describe('TreeSelect.checkable', () => {
       />,
     );
 
-    wrapper.search('0-0');
-    wrapper.selectNode(0);
+    search(container, '0-0');
+    selectNode(0);
     expect(onChange).toHaveBeenCalledWith(['0-1-0', '0-1-2'], expect.anything(), expect.anything());
   });
 
@@ -420,7 +421,7 @@ describe('TreeSelect.checkable', () => {
     it('uncontrolled', () => {
       const onChange = jest.fn();
 
-      const wrapper = mount(
+      const { container } = render(
         <TreeSelect
           treeCheckable
           treeData={treeData}
@@ -430,15 +431,14 @@ describe('TreeSelect.checkable', () => {
         />,
       );
 
-      wrapper.search('0-0-1');
-      wrapper.selectNode(1);
+      search(container, '0-0-1');
+      selectNode(1);
       expect(onChange).toHaveBeenCalledWith(['0-0-1'], expect.anything(), expect.anything());
 
       expect(
-        wrapper
-          .find('.rc-tree-select-tree-checkbox')
-          .at(0)
-          .hasClass('rc-tree-select-tree-checkbox-indeterminate'),
+        container
+          .querySelectorAll('.rc-tree-select-tree-checkbox')[0]
+          .classList.contains('rc-tree-select-tree-checkbox-indeterminate'),
       ).toBeTruthy();
     });
 
@@ -471,17 +471,16 @@ describe('TreeSelect.checkable', () => {
         }
       }
 
-      const wrapper = mount(<Test />);
+      const { container } = render(<Test />);
 
-      wrapper.search('0-0-1');
-      wrapper.selectNode(1);
+      search(container, '0-0-1');
+      selectNode(1);
       expect(onChange).toHaveBeenCalled();
 
       expect(
-        wrapper
-          .find('.rc-tree-select-tree-checkbox')
-          .at(0)
-          .hasClass('rc-tree-select-tree-checkbox-indeterminate'),
+        container
+          .querySelectorAll('.rc-tree-select-tree-checkbox')[0]
+          .classList.contains('rc-tree-select-tree-checkbox-indeterminate'),
       ).toBe(true);
     });
   });
@@ -489,7 +488,12 @@ describe('TreeSelect.checkable', () => {
   describe('labelInValue', () => {
     it('basic', () => {
       const wrapper = mount(
-        <TreeSelect treeCheckable showCheckedStrategy="SHOW_PARENT" labelInValue value={[{ value: '0-0' }]}>
+        <TreeSelect
+          treeCheckable
+          showCheckedStrategy="SHOW_PARENT"
+          labelInValue
+          value={[{ value: '0-0' }]}
+        >
           <TreeNode key="0-0" value="0-0" title="0-0">
             <TreeNode key="0-0-0" value="0-0-0" title="0-0-0" />
           </TreeNode>
@@ -540,26 +544,26 @@ describe('TreeSelect.checkable', () => {
   it('extra.allCheckedNodes', () => {
     const onChange = jest.fn();
 
-    const wrapper = mount(
+    const { container } = render(
       <TreeSelect open multiple treeCheckable onChange={onChange}>
         <TreeNode key="0-0" value="0-0" title="0-0" />
       </TreeSelect>,
     );
 
     // Just click
-    wrapper.selectNode();
+    selectNode();
     expect(onChange.mock.calls[0][2].allCheckedNodes).toEqual([
       expect.objectContaining({
         pos: '0-0',
       }),
     ]);
 
-    wrapper.clearSelection(0);
+    clearSelection(container, 0);
     onChange.mockReset();
 
     // By search
-    wrapper.search('0');
-    wrapper.selectNode();
+    search(container, '0');
+    selectNode();
     expect(onChange.mock.calls[0][2].allCheckedNodes).toEqual([
       expect.objectContaining({
         pos: '0-0',
@@ -608,7 +612,7 @@ describe('TreeSelect.checkable', () => {
 
     const onChange = jest.fn();
 
-    const wrapper = mount(
+    const { container } = render(
       <TreeSelect
         open
         defaultValue={[{ value: '0-1' }]}
@@ -620,8 +624,8 @@ describe('TreeSelect.checkable', () => {
       />,
     );
 
-    wrapper.search('0-0-0');
-    wrapper.selectNode(1);
+    search(container, '0-0-0');
+    selectNode(1);
 
     expect(onChange.mock.calls[0][0]).toEqual([
       { label: 'Node2', value: '0-1' },
@@ -639,15 +643,17 @@ describe('TreeSelect.checkable', () => {
       },
     ];
 
-    const wrapper = mount(<TreeSelect defaultValue={['0-0']} treeData={treeData} treeCheckable />);
+    const { container } = render(
+      <TreeSelect defaultValue={['0-0']} treeData={treeData} treeCheckable />,
+    );
 
-    expect(wrapper.getSelection().length).toBeTruthy();
-    expect(wrapper.find('.rc-tree-select-selection-item-remove').length).toBeFalsy();
+    expect(container.querySelectorAll('.rc-tree-select-selection-item').length).toBeTruthy();
+    expect(container.querySelectorAll('.rc-tree-select-selection-item-remove').length).toBeFalsy();
   });
 
   it('treeCheckStrictly can set halfChecked', () => {
     const onChange = jest.fn();
-    const wrapper = mount(
+    const { container } = render(
       <TreeSelect
         treeCheckStrictly
         treeCheckable
@@ -662,17 +668,19 @@ describe('TreeSelect.checkable', () => {
     );
 
     function getTreeNode(index) {
-      return wrapper.find('.rc-tree-select-tree-treenode').not('[aria-hidden]').at(index);
+      const treeNodes = container.querySelectorAll('.rc-tree-select-tree-treenode');
+      const visibleNodes = Array.from(treeNodes).filter(node => !node.hasAttribute('aria-hidden'));
+      return visibleNodes[index];
     }
 
     expect(
-      getTreeNode(0).hasClass('rc-tree-select-tree-treenode-checkbox-indeterminate'),
+      getTreeNode(0).classList.contains('rc-tree-select-tree-treenode-checkbox-indeterminate'),
     ).toBeTruthy();
     expect(
-      getTreeNode(1).hasClass('rc-tree-select-tree-treenode-checkbox-indeterminate'),
+      getTreeNode(1).classList.contains('rc-tree-select-tree-treenode-checkbox-indeterminate'),
     ).toBeFalsy();
 
-    wrapper.selectNode(1);
+    selectNode(1);
     expect(onChange).toHaveBeenCalledWith(
       [
         {
diff --git a/tests/util.tsx b/tests/util.tsx
index 5941533f..5a3e7262 100644
--- a/tests/util.tsx
+++ b/tests/util.tsx
@@ -36,3 +36,8 @@ export function search(element: HTMLElement, value: string) {
     jest.advanceTimersByTime(10000);
   });
 }
+
+export function clearSelection(element: HTMLElement, index = 0) {
+  const removeButton = element.querySelectorAll('.rc-tree-select-selection-item-remove')[index];
+  fireEvent.click(removeButton);
+}

From 7d9fa17f64e3104837671b4d0c0fbe1785d8bd7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Wed, 22 Oct 2025 15:52:37 +0800
Subject: [PATCH 06/10] test: part of test

---
 tests/Select.checkable.spec.tsx | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/tests/Select.checkable.spec.tsx b/tests/Select.checkable.spec.tsx
index 4fb080ad..d2073e64 100644
--- a/tests/Select.checkable.spec.tsx
+++ b/tests/Select.checkable.spec.tsx
@@ -3,7 +3,7 @@ import { fireEvent, render } from '@testing-library/react';
 import { mount } from 'enzyme';
 import React from 'react';
 import TreeSelect, { SHOW_ALL, SHOW_PARENT, TreeNode } from '../src';
-import { clearSelection, search, selectNode } from './util';
+import { clearSelection, search, selectNode, triggerOpen } from './util';
 
 describe('TreeSelect.checkable', () => {
   it('allow clear when controlled', () => {
@@ -210,7 +210,9 @@ describe('TreeSelect.checkable', () => {
     expect(wrapper.getSelection()).toHaveLength(0);
   });
 
-  it('clear selected value and input value', async () => {
+  it('clear selected value and input value', () => {
+    jest.useFakeTimers();
+
     const treeData = [
       {
         key: '0',
@@ -228,12 +230,23 @@ describe('TreeSelect.checkable', () => {
         showCheckedStrategy={SHOW_PARENT}
       />,
     );
-    wrapper.openSelect();
-    wrapper.selectNode(0);
-    wrapper.search('foo');
-    wrapper.clearAll();
-    expect(wrapper.getSelection()).toHaveLength(0);
-    expect(wrapper.find('input').first().props().value).toBe('');
+
+    triggerOpen(container);
+    selectNode(0);
+    search(container, 'foo');
+
+    // Clear all using mouseDown (same as wrapper.clearAll())
+    const clearButton = container.querySelector('.rc-tree-select-clear')!;
+    fireEvent.mouseDown(clearButton);
+
+    // Check that no items are selected
+    expect(container.querySelectorAll('.rc-tree-select-selection-item')).toHaveLength(0);
+
+    // Check that input value is cleared
+    const input = container.querySelector('input') as HTMLInputElement;
+    expect(input.value).toBe('');
+
+    jest.useRealTimers();
   });
 
   describe('uncheck', () => {

From e4ba16d6060169736352a7bf75c99dda80536147 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Wed, 22 Oct 2025 16:06:05 +0800
Subject: [PATCH 07/10] test: part of test

---
 tests/Select.checkable.spec.tsx | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/tests/Select.checkable.spec.tsx b/tests/Select.checkable.spec.tsx
index d2073e64..e63d6b76 100644
--- a/tests/Select.checkable.spec.tsx
+++ b/tests/Select.checkable.spec.tsx
@@ -316,6 +316,8 @@ describe('TreeSelect.checkable', () => {
     });
 
     it('check in filter', () => {
+      jest.useFakeTimers();
+
       const treeData = [
         {
           key: 'P001',
@@ -344,14 +346,20 @@ describe('TreeSelect.checkable', () => {
           ],
         },
       ];
-      const wrapper = mount(<TreeSelect treeCheckable treeData={treeData} open />);
-      wrapper.search('58');
-      wrapper.selectNode(2);
-      expect(wrapper.getSelection()).toHaveLength(1);
-
-      wrapper.search('59');
-      wrapper.selectNode(2);
-      expect(wrapper.getSelection()).toHaveLength(2);
+
+      const { container } = render(<TreeSelect treeCheckable treeData={treeData} open />);
+
+      // Search for '58' and select the found node
+      search(container, '58');
+      selectNode(2);
+      expect(container.querySelectorAll('.rc-tree-select-selection-item')).toHaveLength(1);
+
+      // Search for '59' and select another node
+      search(container, '59');
+      selectNode(2);
+      expect(container.querySelectorAll('.rc-tree-select-selection-item')).toHaveLength(2);
+
+      jest.useRealTimers();
     });
   });
 

From f5ed7f3226a7bbb96bb774b4fa7608c79d26946b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Wed, 22 Oct 2025 16:58:45 +0800
Subject: [PATCH 08/10] test: fix all

---
 tests/Select.multiple.spec.js | 55 ++++++++++++++++++++++++++---------
 tests/Select.tree.spec.js     | 33 ++++++++++++---------
 tests/setup.js                |  2 +-
 3 files changed, 63 insertions(+), 27 deletions(-)

diff --git a/tests/Select.multiple.spec.js b/tests/Select.multiple.spec.js
index 81a70898..a01dc393 100644
--- a/tests/Select.multiple.spec.js
+++ b/tests/Select.multiple.spec.js
@@ -1,12 +1,22 @@
 /* eslint-disable no-undef */
-import { render, fireEvent, within } from '@testing-library/react';
+import { render, fireEvent, within, screen } from '@testing-library/react';
 import { mount } from 'enzyme';
 import KeyCode from '@rc-component/util/lib/KeyCode';
 import React from 'react';
 import TreeSelect, { TreeNode } from '../src';
 import focusTest from './shared/focusTest';
+import { selectNode, clearSelection, search, expectOpen, triggerOpen } from './util';
 
 describe('TreeSelect.multiple', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
   focusTest(true);
 
   const treeData = [
@@ -129,14 +139,29 @@ describe('TreeSelect.multiple', () => {
   });
 
   it('do not open tree when close button click', () => {
-    const wrapper = mount(createSelect());
-    wrapper.openSelect();
-    wrapper.selectNode(0);
-    wrapper.selectNode(1);
-    wrapper.openSelect();
-    wrapper.clearSelection(0);
-    expect(wrapper.isOpen()).toBeFalsy();
-    expect(wrapper.getSelection()).toHaveLength(1);
+    const { container } = render(createSelect());
+
+    // Open the select dropdown
+    triggerOpen(container);
+
+    // Select two nodes
+    selectNode(0);
+    selectNode(1);
+
+    // Check selections exist
+    expect(container.querySelectorAll('.rc-tree-select-selection-item')).toHaveLength(2);
+
+    // Open again to ensure dropdown is open
+    triggerOpen(container);
+
+    // Clear one selection - this should NOT open the dropdown
+    clearSelection(container, 0);
+
+    // Check that only one selection remains
+    expect(container.querySelectorAll('.rc-tree-select-selection-item')).toHaveLength(1);
+
+    // Check that dropdown is closed after clearing
+    expectOpen(container, false);
   });
 
   describe('maxTagCount', () => {
@@ -239,8 +264,8 @@ describe('TreeSelect.multiple', () => {
   // https://github.com/ant-design/ant-design/issues/12315
   it('select searched node', () => {
     const onChange = jest.fn();
-    const wrapper = mount(
-      <TreeSelect value={['leaf1']} multiple onChange={onChange}>
+    const { container } = render(
+      <TreeSelect value={['leaf1']} multiple onChange={onChange} open>
         <TreeNode value="parent 1" title="parent 1" key="0-1">
           <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
             <TreeNode value="leaf1" title="my leaf" key="random" />
@@ -252,8 +277,12 @@ describe('TreeSelect.multiple', () => {
       </TreeSelect>,
     );
 
-    wrapper.search('sss');
-    wrapper.selectNode(2);
+    // Search for 'sss'
+    search(container, 'sss');
+
+    // Find and click on the searched node - use selectNode from util with correct index
+    selectNode(2); // The sss node should be at index 2 after search filtering
+
     expect(onChange).toHaveBeenCalledWith(['leaf1', 'sss'], expect.anything(), expect.anything());
   });
 
diff --git a/tests/Select.tree.spec.js b/tests/Select.tree.spec.js
index 71dbae7a..e0b43609 100644
--- a/tests/Select.tree.spec.js
+++ b/tests/Select.tree.spec.js
@@ -1,8 +1,10 @@
 /* eslint-disable no-undef, react/no-multi-comp, no-console */
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, fireEvent, act } from '@testing-library/react';
 import { resetWarned } from '@rc-component/util/lib/warning';
 import TreeSelect, { TreeNode as SelectNode } from '../src';
+import { selectNode, triggerOpen, expectOpen } from './util';
+import { mount } from 'enzyme';
 
 describe('TreeSelect.tree', () => {
   const createSelect = props => (
@@ -71,7 +73,7 @@ describe('TreeSelect.tree', () => {
   it('warning if node key are not same as value', () => {
     resetWarned();
     const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    mount(<TreeSelect treeData={[{ title: 'little', value: 'ttt', key: 'little' }]} />);
+    render(<TreeSelect treeData={[{ title: 'little', value: 'ttt', key: 'little' }]} />);
     expect(spy).toHaveBeenCalledWith(
       'Warning: `key` or `value` with TreeNode must be the same or you can remove one of them. key: little, value: ttt.',
     );
@@ -81,7 +83,7 @@ describe('TreeSelect.tree', () => {
   it('warning if node undefined value', () => {
     resetWarned();
     const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    mount(<TreeSelect treeData={[{ title: 'little' }]} />);
+    render(<TreeSelect treeData={[{ title: 'little' }]} />);
     expect(spy).toHaveBeenCalledWith('Warning: TreeNode `value` is invalidate: undefined');
     spy.mockRestore();
   });
@@ -89,7 +91,7 @@ describe('TreeSelect.tree', () => {
   it('warning if node has same value', () => {
     resetWarned();
     const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    mount(
+    render(
       <TreeSelect
         treeData={[
           { title: 'little', value: 'ttt' },
@@ -103,13 +105,14 @@ describe('TreeSelect.tree', () => {
 
   // https://github.com/ant-design/ant-design/issues/14597
   it('empty string is also a value', () => {
-    const wrapper = mount(
+    const { container } = render(
       <TreeSelect placeholder="Please select" value="">
         <SelectNode key="" value="" title="empty string" />
       </TreeSelect>,
     );
 
-    expect(wrapper.getSelection(0).text()).toEqual('empty string');
+    const selectionContent = container.querySelector('.rc-tree-select-content-value');
+    expect(selectionContent?.textContent).toEqual('empty string');
   });
 
   describe('treeNodeLabelProp', () => {
@@ -121,7 +124,7 @@ describe('TreeSelect.tree', () => {
       },
     ].forEach(({ name, ...restProps }) => {
       it(name, () => {
-        const wrapper = mount(
+        const { container } = render(
           <TreeSelect
             open
             treeDefaultExpandAll
@@ -131,24 +134,28 @@ describe('TreeSelect.tree', () => {
           />,
         );
 
-        expect(wrapper.find('.rc-tree-select-tree-title').text()).toEqual('a light');
-        expect(wrapper.find('.rc-tree-select-selection-item').text()).toEqual('Light');
+        expect(container.querySelector('.rc-tree-select-tree-title')?.textContent).toEqual(
+          'a light',
+        );
+        expect(container.querySelector('.rc-tree-select-content-value')?.textContent).toEqual(
+          'Light',
+        );
       });
     });
   });
 
   it('Node icon', () => {
-    const wrapper = mount(
+    const { container } = render(
       <TreeSelect open>
         <SelectNode value="little" title="Little" icon={<span className="bamboo-light" />} />
       </TreeSelect>,
     );
 
-    expect(wrapper.exists('.bamboo-light')).toBeTruthy();
+    expect(container.querySelector('.bamboo-light')).toBeTruthy();
   });
 
   it('dynamic with filter should not show expand icon', () => {
-    const wrapper = mount(
+    const { container } = render(
       <TreeSelect
         open
         treeData={[{ label: 'Bamboo', value: 'bamboo', isLeaf: false }]}
@@ -156,6 +163,6 @@ describe('TreeSelect.tree', () => {
       />,
     );
 
-    expect(wrapper.exists('.rc-tree-select-tree-icon__open')).toBeFalsy();
+    expect(container.querySelector('.rc-tree-select-tree-icon__open')).toBeFalsy();
   });
 });
diff --git a/tests/setup.js b/tests/setup.js
index c6171a47..251482d4 100644
--- a/tests/setup.js
+++ b/tests/setup.js
@@ -40,7 +40,7 @@ Object.assign(Enzyme.ReactWrapper.prototype, {
     return this.find('.rc-tree-select-clear').first().simulate('mouseDown');
   },
   search(text) {
-    this.find('input.rc-tree-select-selection-search-input').simulate('change', {
+    this.find('input.rc-tree-select-input').simulate('change', {
       target: { value: text },
     });
   },

From a7ebb12a16a7f0fcaee452f7cc07003bd530005a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Wed, 22 Oct 2025 17:03:40 +0800
Subject: [PATCH 09/10] chore: fix lint

---
 examples/custom-icons.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/custom-icons.tsx b/examples/custom-icons.tsx
index 1b9a2258..390ba41f 100644
--- a/examples/custom-icons.tsx
+++ b/examples/custom-icons.tsx
@@ -71,9 +71,9 @@ const iconProps = {
 };
 
 const iconPropsFunction = {
-  suffixIcon: () => suffixIcon,
-  clearIcon: () => clearIcon,
-  removeIcon: () => removeIcon,
+  suffixIcon,
+  clearIcon,
+  removeIcon,
   switcherIcon,
 };
 

From 5f3fed49da57cea5f520d60c8b7be036800a2d8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Wed, 22 Oct 2025 17:31:41 +0800
Subject: [PATCH 10/10] test: update snapshot

---
 package.json                                  |  2 +-
 .../Select.checkable.spec.tsx.snap            | 17 ++++++------
 .../Select.multiple.spec.js.snap              | 13 +++++++---
 tests/__snapshots__/Select.spec.tsx.snap      | 26 +++++++++++++------
 4 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index 3415f54c..0a3c03a2 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
     "*": "prettier --write --ignore-unknown"
   },
   "dependencies": {
-    "@rc-component/select": "~1.2.0-alpha.0",
+    "@rc-component/select": "~1.2.0-alpha.3",
     "@rc-component/tree": "~1.0.1",
     "@rc-component/util": "^1.3.0",
     "clsx": "^2.1.1"
diff --git a/tests/__snapshots__/Select.checkable.spec.tsx.snap b/tests/__snapshots__/Select.checkable.spec.tsx.snap
index 84669fbf..198d4a14 100644
--- a/tests/__snapshots__/Select.checkable.spec.tsx.snap
+++ b/tests/__snapshots__/Select.checkable.spec.tsx.snap
@@ -275,13 +275,18 @@ exports[`TreeSelect.checkable uncheck remove by selector not treeCheckStrictly 2
   <div
     class="rc-tree-select rc-tree-select-multiple rc-tree-select-open"
   >
-    <div
-      class="rc-tree-select-placeholder"
-      style="visibility: visible;"
-    />
     <div
       class="rc-tree-select-content"
     >
+      <div
+        class="rc-tree-select-content-item rc-tree-select-content-item-prefix"
+        style="opacity: 1;"
+      >
+        <div
+          class="rc-tree-select-placeholder"
+          style="visibility: visible;"
+        />
+      </div>
       <div
         class="rc-tree-select-content-item rc-tree-select-content-item-suffix"
         style="opacity: 1;"
@@ -750,10 +755,6 @@ exports[`TreeSelect.checkable uncheck remove by tree check 2`] = `
   <div
     class="rc-tree-select rc-tree-select-multiple rc-tree-select-open"
   >
-    <div
-      class="rc-tree-select-placeholder"
-      style="visibility: hidden;"
-    />
     <div
       class="rc-tree-select-content"
     >
diff --git a/tests/__snapshots__/Select.multiple.spec.js.snap b/tests/__snapshots__/Select.multiple.spec.js.snap
index 3aa24f5d..a348336b 100644
--- a/tests/__snapshots__/Select.multiple.spec.js.snap
+++ b/tests/__snapshots__/Select.multiple.spec.js.snap
@@ -4,13 +4,18 @@ exports[`TreeSelect.multiple can hide search box by showSearch = false 1`] = `
 <div
   class="rc-tree-select rc-tree-select-multiple"
 >
-  <div
-    class="rc-tree-select-placeholder"
-    style="visibility: visible;"
-  />
   <div
     class="rc-tree-select-content"
   >
+    <div
+      class="rc-tree-select-content-item rc-tree-select-content-item-prefix"
+      style="opacity: 1;"
+    >
+      <div
+        class="rc-tree-select-placeholder"
+        style="visibility: visible;"
+      />
+    </div>
     <div
       class="rc-tree-select-content-item rc-tree-select-content-item-suffix"
       style="opacity: 1;"
diff --git a/tests/__snapshots__/Select.spec.tsx.snap b/tests/__snapshots__/Select.spec.tsx.snap
index 89973bf9..b2cfb03a 100644
--- a/tests/__snapshots__/Select.spec.tsx.snap
+++ b/tests/__snapshots__/Select.spec.tsx.snap
@@ -63,13 +63,18 @@ exports[`TreeSelect.basic render renders correctly 1`] = `
   class="awesome forTest awesome-multiple"
   style="width: 300px;"
 >
-  <div
-    class="awesome-placeholder"
-    style="visibility: visible;"
-  />
   <div
     class="awesome-content"
   >
+    <div
+      class="awesome-content-item awesome-content-item-prefix"
+      style="opacity: 1;"
+    >
+      <div
+        class="awesome-placeholder"
+        style="visibility: visible;"
+      />
+    </div>
     <div
       class="awesome-content-item awesome-content-item-suffix"
       style="opacity: 1;"
@@ -129,13 +134,18 @@ exports[`TreeSelect.basic render renders tree correctly 1`] = `
   <div
     class="rc-tree-select rc-tree-select-multiple rc-tree-select-open"
   >
-    <div
-      class="rc-tree-select-placeholder"
-      style="visibility: visible;"
-    />
     <div
       class="rc-tree-select-content"
     >
+      <div
+        class="rc-tree-select-content-item rc-tree-select-content-item-prefix"
+        style="opacity: 1;"
+      >
+        <div
+          class="rc-tree-select-placeholder"
+          style="visibility: visible;"
+        />
+      </div>
       <div
         class="rc-tree-select-content-item rc-tree-select-content-item-suffix"
         style="opacity: 1;"