fix: TreeSelect content being cut due to wrong height calculation (#51567)

Co-authored-by: 二货机器人 <smith3816@gmail.com>

components/config-provider/__tests__/__snapshots__/components.test.tsx.snap

@@ -42577,8 +42577,14 @@ exports[`ConfigProvider components TreeSelect configProvider 1`] = `
   >
     <div>
       <div>
+        <span
+          aria-live="assertive"
+          style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
+        >
+          light
+        </span>
         <div
-          class="config-select-tree"
+          class="config-select-tree config-select-tree-active-focused"
           role="tree"
         >
           <div>
@@ -42617,7 +42623,7 @@ exports[`ConfigProvider components TreeSelect configProvider 1`] = `
                 >
                   <div
                     aria-grabbed="false"
-                    class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-leaf-last"
+                    class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last"
                     draggable="false"
                   >
                     <span
@@ -42781,8 +42787,14 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize large
   >
     <div>
       <div>
+        <span
+          aria-live="assertive"
+          style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
+        >
+          light
+        </span>
         <div
-          class="config-select-tree"
+          class="config-select-tree config-select-tree-active-focused"
           role="tree"
         >
           <div>
@@ -42821,7 +42833,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize large
                 >
                   <div
                     aria-grabbed="false"
-                    class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-leaf-last"
+                    class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last"
                     draggable="false"
                   >
                     <span
@@ -42920,8 +42932,14 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize middl
   >
     <div>
       <div>
+        <span
+          aria-live="assertive"
+          style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
+        >
+          light
+        </span>
         <div
-          class="config-select-tree"
+          class="config-select-tree config-select-tree-active-focused"
           role="tree"
         >
           <div>
@@ -42960,7 +42978,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize middl
                 >
                   <div
                     aria-grabbed="false"
-                    class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-leaf-last"
+                    class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last"
                     draggable="false"
                   >
                     <span
@@ -43059,8 +43077,14 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize small
   >
     <div>
       <div>
+        <span
+          aria-live="assertive"
+          style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
+        >
+          light
+        </span>
         <div
-          class="config-select-tree"
+          class="config-select-tree config-select-tree-active-focused"
           role="tree"
         >
           <div>
@@ -43099,7 +43123,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize small
                 >
                   <div
                     aria-grabbed="false"
-                    class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-leaf-last"
+                    class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last"
                     draggable="false"
                   >
                     <span
@@ -43198,8 +43222,14 @@ exports[`ConfigProvider components TreeSelect normal 1`] = `
   >
     <div>
       <div>
+        <span
+          aria-live="assertive"
+          style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
+        >
+          light
+        </span>
         <div
-          class="ant-select-tree"
+          class="ant-select-tree ant-select-tree-active-focused"
           role="tree"
         >
           <div>
@@ -43238,7 +43268,7 @@ exports[`ConfigProvider components TreeSelect normal 1`] = `
                 >
                   <div
                     aria-grabbed="false"
-                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
+                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-active ant-select-tree-treenode-leaf-last"
                     draggable="false"
                   >
                     <span
@@ -43337,8 +43367,14 @@ exports[`ConfigProvider components TreeSelect prefixCls 1`] = `
   >
     <div>
       <div>
+        <span
+          aria-live="assertive"
+          style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
+        >
+          light
+        </span>
         <div
-          class="prefix-TreeSelect-tree"
+          class="prefix-TreeSelect-tree prefix-TreeSelect-tree-active-focused"
           role="tree"
         >
           <div>
@@ -43377,7 +43413,7 @@ exports[`ConfigProvider components TreeSelect prefixCls 1`] = `
                 >
                   <div
                     aria-grabbed="false"
-                    class="prefix-TreeSelect-tree-treenode prefix-TreeSelect-tree-treenode-switcher-close prefix-TreeSelect-tree-treenode-leaf-last"
+                    class="prefix-TreeSelect-tree-treenode prefix-TreeSelect-tree-treenode-switcher-close prefix-TreeSelect-tree-treenode-active prefix-TreeSelect-tree-treenode-leaf-last"
                     draggable="false"
                   >
                     <span

components/tree-select/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,151 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TreeSelect TreeSelect Custom Icons should \`treeIcon\` work 1`] = `
-<div
-  class="ant-select ant-tree-select ant-select-outlined ant-select-single ant-select-show-arrow ant-select-open"
->
-  <div
-    class="ant-select-selector"
-  >
-    <span
-      class="ant-select-selection-wrap"
-    >
-      <span
-        class="ant-select-selection-search"
-      >
-        <input
-          aria-autocomplete="list"
-          aria-controls="rc_select_TEST_OR_SSR_list"
-          aria-expanded="true"
-          aria-haspopup="listbox"
-          aria-owns="rc_select_TEST_OR_SSR_list"
-          autocomplete="off"
-          class="ant-select-selection-search-input"
-          id="rc_select_TEST_OR_SSR"
-          readonly=""
-          role="combobox"
-          style="opacity: 0;"
-          type="search"
-          unselectable="on"
-          value=""
-        />
-      </span>
-      <span
-        class="ant-select-selection-placeholder"
-      />
-    </span>
-  </div>
-  <div
-    class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-tree-select-dropdown ant-select-dropdown-placement-bottomLeft"
-    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-  >
-    <div>
-      <div>
-        <div
-          class="ant-select-tree"
-          role="tree"
-        >
-          <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="ant-select-tree-treenode"
-            style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
-          >
-            <div
-              class="ant-select-tree-indent"
-            >
-              <div
-                class="ant-select-tree-indent-unit"
-              />
-            </div>
-          </div>
-          <div
-            class="ant-select-tree-list"
-            style="position: relative;"
-          >
-            <div
-              class="ant-select-tree-list-holder"
-              style="max-height: 256px; overflow-y: auto;"
-            >
-              <div>
-                <div
-                  class="ant-select-tree-list-holder-inner"
-                  style="display: flex; flex-direction: column;"
-                >
-                  <div
-                    aria-grabbed="false"
-                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
-                    draggable="false"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="ant-select-tree-indent"
-                    />
-                    <span
-                      class="ant-select-tree-switcher ant-select-tree-switcher-noop"
-                    />
-                    <span
-                      class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-normal"
-                      title="parent 1"
-                    >
-                      <span
-                        class="ant-select-tree-iconEle ant-select-tree-icon__customize"
-                      >
-                        <span>
-                          Bamboo
-                        </span>
-                      </span>
-                      <span
-                        class="ant-select-tree-title"
-                      >
-                        parent 1
-                      </span>
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <span
-    aria-hidden="true"
-    class="ant-select-arrow"
-    style="user-select: none;"
-    unselectable="on"
-  >
-    <span
-      aria-label="down"
-      class="anticon anticon-down ant-select-suffix"
-      role="img"
-    >
-      <svg
-        aria-hidden="true"
-        data-icon="down"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-        />
-      </svg>
-    </span>
-  </span>
-</div>
-`;
-
 exports[`TreeSelect TreeSelect Custom Icons should support customized icons 1`] = `
 <div
   class="ant-select ant-tree-select ant-select-outlined ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"

components/tree-select/__tests__/index.test.tsx

@@ -40,11 +40,11 @@ describe('TreeSelect', () => {
     it('should `treeIcon` work', () => {
       const { container } = render(
         <TreeSelect treeIcon open>
-          <TreeNode value="parent 1" title="parent 1" icon={<span>Bamboo</span>} />
+          <TreeNode value="parent 1" title="parent 1" icon={<span className="bamboo" />} />
         </TreeSelect>,
       );
 
-      expect(container.firstChild).toMatchSnapshot();
+      expect(container.querySelector('.ant-select-tree-treenode .bamboo')).toBeTruthy();
     });
   });
 

components/tree-select/index.tsx

@@ -31,6 +31,7 @@ import { useCompactItemContext } from '../space/Compact';
 import type { AntTreeNodeProps, TreeProps } from '../tree';
 import type { SwitcherIcon } from '../tree/Tree';
 import SwitcherIconCom from '../tree/utils/iconUtil';
+import { useToken } from '../theme/internal';
 import useStyle from './style';
 
 type RawValue = string | number;
@@ -97,7 +98,7 @@ const InternalTreeSelect = <ValueType = any, OptionType extends DataNode = DataN
     treeCheckable,
     multiple,
     listHeight = 256,
-    listItemHeight = 26,
+    listItemHeight: customListItemHeight,
     placement,
     notFoundContent,
     switcherIcon,
@@ -129,6 +130,9 @@ const InternalTreeSelect = <ValueType = any, OptionType extends DataNode = DataN
     popupOverflow,
   } = React.useContext(ConfigContext);
 
+  const [, token] = useToken();
+  const listItemHeight = customListItemHeight ?? token?.controlHeightSM + token?.paddingXXS;
+
   if (process.env.NODE_ENV !== 'production') {
     const warning = devUseWarning('TreeSelect');
 

package.json

@@ -283,7 +283,7 @@
     "qs": "^6.13.0",
     "rc-footer": "^0.6.8",
     "rc-tween-one": "^3.0.6",
-    "rc-virtual-list": "^3.14.8",
+    "rc-virtual-list": "^3.15.0",
     "react": "^18.3.1",
     "react-copy-to-clipboard": "^5.1.0",
     "react-countup": "^6.5.3",