From 94aec25ababaa03ebf824936d442d7f23159a58e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Fri, 7 Apr 2023 10:17:00 +0800
Subject: [PATCH] feat: ConfigProvider support config `popupOverflow` for
 scroll logic (#41676)

* feat: popupOverflow

* test: add test case

* docs: preview

* docs: update preview

* test: update test case
---
 .dumi/theme/builtins/InlinePopover/index.tsx  |   50 +
 components/cascader/index.tsx                 |    5 +-
 .../__snapshots__/popup.test.tsx.snap         | 3522 -----------------
 .../config-provider/__tests__/popup.test.tsx  |   53 +-
 components/config-provider/context.ts         |    3 +
 components/config-provider/index.en-US.md     |    2 +-
 components/config-provider/index.tsx          |   12 +-
 components/config-provider/index.zh-CN.md     |    2 +-
 components/select/index.tsx                   |    3 +-
 components/select/useBuiltinPlacements.tsx    |   70 +-
 components/tree-select/index.tsx              |    3 +-
 11 files changed, 162 insertions(+), 3563 deletions(-)
 create mode 100644 .dumi/theme/builtins/InlinePopover/index.tsx

diff --git a/.dumi/theme/builtins/InlinePopover/index.tsx b/.dumi/theme/builtins/InlinePopover/index.tsx
new file mode 100644
index 000000000000..d2327e8ff4c0
--- /dev/null
+++ b/.dumi/theme/builtins/InlinePopover/index.tsx
@@ -0,0 +1,50 @@
+import { PictureOutlined } from '@ant-design/icons';
+import { Image, Tooltip, Typography } from 'antd';
+import React from 'react';
+import useLocale from '../../../hooks/useLocale';
+
+const locales = {
+  cn: {
+    tip: '预览',
+  },
+  en: {
+    tip: 'Preview',
+  },
+};
+
+export interface InlinePopoverProps {
+  previewURL?: string;
+}
+
+// 鼠标悬浮弹出 Popover 组件，用于帮助用户更快看到一些属性对应的预览效果
+const InlinePopover: React.FC = (props: InlinePopoverProps) => {
+  const { previewURL } = props;
+
+  const [locale] = useLocale(locales);
+  const [visible, setVisible] = React.useState(false);
+
+  return (
+    <>
+      <Tooltip title={locale.tip}>
+        <Typography.Link onClick={() => setVisible(true)}>
+          <PictureOutlined />
+        </Typography.Link>
+      </Tooltip>
+
+      <Image
+        width={10}
+        style={{ display: 'none' }}
+        src={previewURL}
+        preview={{
+          visible,
+          src: previewURL,
+          onVisibleChange: (value) => {
+            setVisible(value);
+          },
+        }}
+      />
+    </>
+  );
+};
+
+export default InlinePopover;
diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
index ef61f2306d4c..f11cdb002e59 100644
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@@ -161,8 +161,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
     getPrefixCls,
     renderEmpty,
     direction: rootDirection,
-    // virtual,
-    // dropdownMatchSelectWidth,
+    popupOverflow,
   } = React.useContext(ConfigContext);
 
   const mergedDirection = direction || rootDirection;
@@ -276,7 +275,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
     return isRtl ? 'bottomRight' : 'bottomLeft';
   }, [placement, isRtl]);
 
-  const mergedBuiltinPlacements = useBuiltinPlacements(builtinPlacements);
+  const mergedBuiltinPlacements = useBuiltinPlacements(builtinPlacements, popupOverflow);
 
   // ==================== Render =====================
   const renderNode = (
diff --git a/components/config-provider/__tests__/__snapshots__/popup.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/popup.test.tsx.snap
index f066e971e080..da10359ca813 100644
--- a/components/config-provider/__tests__/__snapshots__/popup.test.tsx.snap
+++ b/components/config-provider/__tests__/__snapshots__/popup.test.tsx.snap
@@ -33,412 +33,6 @@ exports[`ConfigProvider.Popup disable virtual if dropdownMatchSelectWidth is fal
         class="ant-select-selection-placeholder"
       />
     </div>
-    <div
-      class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
-      style="left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0;"
-    >
-      <div>
-        <div
-          class="rc-virtual-list"
-          style="position: relative;"
-        >
-          <div
-            class="rc-virtual-list-holder"
-            style="max-height: 256px; overflow-y: auto;"
-          >
-            <div>
-              <div
-                class="rc-virtual-list-holder-inner"
-                id="rc_select_TEST_OR_SSR_list"
-                role="listbox"
-                style="display: flex; flex-direction: column;"
-              >
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option ant-select-item-option-active"
-                  id="rc_select_TEST_OR_SSR_list_0"
-                  role="option"
-                  title="0"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    0
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_1"
-                  role="option"
-                  title="1"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    1
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_2"
-                  role="option"
-                  title="2"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    2
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_3"
-                  role="option"
-                  title="3"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    3
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_4"
-                  role="option"
-                  title="4"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    4
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_5"
-                  role="option"
-                  title="5"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    5
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_6"
-                  role="option"
-                  title="6"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    6
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_7"
-                  role="option"
-                  title="7"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    7
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_8"
-                  role="option"
-                  title="8"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    8
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_9"
-                  role="option"
-                  title="9"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    9
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_10"
-                  role="option"
-                  title="10"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    10
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_11"
-                  role="option"
-                  title="11"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    11
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_12"
-                  role="option"
-                  title="12"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    12
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_13"
-                  role="option"
-                  title="13"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    13
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_14"
-                  role="option"
-                  title="14"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    14
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_15"
-                  role="option"
-                  title="15"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    15
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_16"
-                  role="option"
-                  title="16"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    16
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_17"
-                  role="option"
-                  title="17"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    17
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_18"
-                  role="option"
-                  title="18"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    18
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_19"
-                  role="option"
-                  title="19"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    19
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <span
       aria-hidden="true"
       class="ant-select-arrow"
@@ -496,518 +90,6 @@ exports[`ConfigProvider.Popup disable virtual if dropdownMatchSelectWidth is fal
         class="ant-select-selection-placeholder"
       />
     </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="left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0;"
-    >
-      <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"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          0
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          1
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          2
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          3
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          4
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          5
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          6
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          7
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          8
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          9
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          10
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          11
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          12
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          13
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          14
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          15
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          16
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          17
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          18
-                        </span>
-                      </span>
-                    </div>
-                    <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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          19
-                        </span>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <span
       aria-hidden="true"
       class="ant-select-arrow"
@@ -1065,262 +147,6 @@ exports[`ConfigProvider.Popup disable virtual if dropdownMatchSelectWidth is fal
         class="ant-select-selection-placeholder"
       />
     </div>
-    <div
-      class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
-      style="left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;"
-    >
-      <div>
-        <div
-          class="ant-cascader-menus"
-        >
-          <ul
-            class="ant-cascader-menu"
-            role="menu"
-          >
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="0"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                0
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="1"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                1
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="2"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                2
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="3"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                3
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="4"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                4
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="5"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                5
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="6"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                6
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="7"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                7
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="8"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                8
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="9"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                9
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="10"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                10
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="11"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                11
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="12"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                12
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="13"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                13
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="14"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                14
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="15"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                15
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="16"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                16
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="17"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                17
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="18"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                18
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="19"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                19
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
     <span
       aria-hidden="true"
       class="ant-select-arrow"
@@ -1384,412 +210,6 @@ exports[`ConfigProvider.Popup disable virtual if is false 1`] = `
         class="ant-select-selection-placeholder"
       />
     </div>
-    <div
-      class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
-      style="left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0; width: 0px;"
-    >
-      <div>
-        <div
-          class="rc-virtual-list"
-          style="position: relative;"
-        >
-          <div
-            class="rc-virtual-list-holder"
-            style="max-height: 256px; overflow-y: auto;"
-          >
-            <div>
-              <div
-                class="rc-virtual-list-holder-inner"
-                id="rc_select_TEST_OR_SSR_list"
-                role="listbox"
-                style="display: flex; flex-direction: column;"
-              >
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option ant-select-item-option-active"
-                  id="rc_select_TEST_OR_SSR_list_0"
-                  role="option"
-                  title="0"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    0
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_1"
-                  role="option"
-                  title="1"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    1
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_2"
-                  role="option"
-                  title="2"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    2
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_3"
-                  role="option"
-                  title="3"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    3
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_4"
-                  role="option"
-                  title="4"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    4
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_5"
-                  role="option"
-                  title="5"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    5
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_6"
-                  role="option"
-                  title="6"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    6
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_7"
-                  role="option"
-                  title="7"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    7
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_8"
-                  role="option"
-                  title="8"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    8
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_9"
-                  role="option"
-                  title="9"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    9
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_10"
-                  role="option"
-                  title="10"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    10
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_11"
-                  role="option"
-                  title="11"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    11
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_12"
-                  role="option"
-                  title="12"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    12
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_13"
-                  role="option"
-                  title="13"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    13
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_14"
-                  role="option"
-                  title="14"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    14
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_15"
-                  role="option"
-                  title="15"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    15
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_16"
-                  role="option"
-                  title="16"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    16
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_17"
-                  role="option"
-                  title="17"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    17
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_18"
-                  role="option"
-                  title="18"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    18
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_19"
-                  role="option"
-                  title="19"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    19
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <span
       aria-hidden="true"
       class="ant-select-arrow"
@@ -1847,518 +267,6 @@ exports[`ConfigProvider.Popup disable virtual if is false 1`] = `
         class="ant-select-selection-placeholder"
       />
     </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="left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0; width: 0px;"
-    >
-      <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"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          0
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          1
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          2
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          3
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          4
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          5
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          6
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          7
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          8
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          9
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          10
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          11
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          12
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          13
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          14
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          15
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          16
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          17
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          18
-                        </span>
-                      </span>
-                    </div>
-                    <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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          19
-                        </span>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <span
       aria-hidden="true"
       class="ant-select-arrow"
@@ -2416,262 +324,6 @@ exports[`ConfigProvider.Popup disable virtual if is false 1`] = `
         class="ant-select-selection-placeholder"
       />
     </div>
-    <div
-      class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
-      style="left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;"
-    >
-      <div>
-        <div
-          class="ant-cascader-menus"
-        >
-          <ul
-            class="ant-cascader-menu"
-            role="menu"
-          >
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="0"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                0
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="1"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                1
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="2"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                2
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="3"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                3
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="4"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                4
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="5"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                5
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="6"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                6
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="7"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                7
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="8"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                8
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="9"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                9
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="10"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                10
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="11"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                11
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="12"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                12
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="13"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                13
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="14"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                14
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="15"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                15
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="16"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                16
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="17"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                17
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="18"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                18
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="19"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                19
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
     <span
       aria-hidden="true"
       class="ant-select-arrow"
@@ -2735,412 +387,6 @@ exports[`ConfigProvider.Popup disable virtual if popupMatchSelectWidth is false
         class="ant-select-selection-placeholder"
       />
     </div>
-    <div
-      class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
-      style="left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0;"
-    >
-      <div>
-        <div
-          class="rc-virtual-list"
-          style="position: relative;"
-        >
-          <div
-            class="rc-virtual-list-holder"
-            style="max-height: 256px; overflow-y: auto;"
-          >
-            <div>
-              <div
-                class="rc-virtual-list-holder-inner"
-                id="rc_select_TEST_OR_SSR_list"
-                role="listbox"
-                style="display: flex; flex-direction: column;"
-              >
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option ant-select-item-option-active"
-                  id="rc_select_TEST_OR_SSR_list_0"
-                  role="option"
-                  title="0"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    0
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_1"
-                  role="option"
-                  title="1"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    1
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_2"
-                  role="option"
-                  title="2"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    2
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_3"
-                  role="option"
-                  title="3"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    3
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_4"
-                  role="option"
-                  title="4"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    4
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_5"
-                  role="option"
-                  title="5"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    5
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_6"
-                  role="option"
-                  title="6"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    6
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_7"
-                  role="option"
-                  title="7"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    7
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_8"
-                  role="option"
-                  title="8"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    8
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_9"
-                  role="option"
-                  title="9"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    9
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_10"
-                  role="option"
-                  title="10"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    10
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_11"
-                  role="option"
-                  title="11"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    11
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_12"
-                  role="option"
-                  title="12"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    12
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_13"
-                  role="option"
-                  title="13"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    13
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_14"
-                  role="option"
-                  title="14"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    14
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_15"
-                  role="option"
-                  title="15"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    15
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_16"
-                  role="option"
-                  title="16"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    16
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_17"
-                  role="option"
-                  title="17"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    17
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_18"
-                  role="option"
-                  title="18"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    18
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-                <div
-                  aria-selected="false"
-                  class="ant-select-item ant-select-item-option"
-                  id="rc_select_TEST_OR_SSR_list_19"
-                  role="option"
-                  title="19"
-                >
-                  <div
-                    class="ant-select-item-option-content"
-                  >
-                    19
-                  </div>
-                  <span
-                    aria-hidden="true"
-                    class="ant-select-item-option-state"
-                    style="user-select: none;"
-                    unselectable="on"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <span
       aria-hidden="true"
       class="ant-select-arrow"
@@ -3198,518 +444,6 @@ exports[`ConfigProvider.Popup disable virtual if popupMatchSelectWidth is false
         class="ant-select-selection-placeholder"
       />
     </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="left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0;"
-    >
-      <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"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          0
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          1
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          2
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          3
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          4
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          5
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          6
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          7
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          8
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          9
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          10
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          11
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          12
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          13
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          14
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          15
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          16
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          17
-                        </span>
-                      </span>
-                    </div>
-                    <div
-                      aria-grabbed="false"
-                      class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
-                      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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          18
-                        </span>
-                      </span>
-                    </div>
-                    <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=""
-                      >
-                        <span
-                          class="ant-select-tree-title"
-                        >
-                          19
-                        </span>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <span
       aria-hidden="true"
       class="ant-select-arrow"
@@ -3767,262 +501,6 @@ exports[`ConfigProvider.Popup disable virtual if popupMatchSelectWidth is false
         class="ant-select-selection-placeholder"
       />
     </div>
-    <div
-      class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
-      style="left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;"
-    >
-      <div>
-        <div
-          class="ant-cascader-menus"
-        >
-          <ul
-            class="ant-cascader-menu"
-            role="menu"
-          >
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="0"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                0
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="1"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                1
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="2"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                2
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="3"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                3
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="4"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                4
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="5"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                5
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="6"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                6
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="7"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                7
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="8"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                8
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="9"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                9
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="10"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                10
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="11"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                11
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="12"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                12
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="13"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                13
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="14"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                14
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="15"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                15
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="16"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                16
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="17"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                17
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="18"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                18
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="19"
-              role="menuitemcheckbox"
-            >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                19
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
     <span
       aria-hidden="true"
       class="ant-select-arrow"
diff --git a/components/config-provider/__tests__/popup.test.tsx b/components/config-provider/__tests__/popup.test.tsx
index 85833a5f43b3..9f4c98b3bd8d 100644
--- a/components/config-provider/__tests__/popup.test.tsx
+++ b/components/config-provider/__tests__/popup.test.tsx
@@ -1,17 +1,34 @@
+import type { TriggerProps } from '@rc-component/trigger';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import React from 'react';
 import ConfigProvider from '..';
+import { render } from '../../../tests/utils';
 import Cascader from '../../cascader';
 import Select from '../../select';
 import TreeSelect from '../../tree-select';
-// eslint-disable-next-line import/no-named-as-default
-import { render } from '../../../tests/utils';
 
 dayjs.extend(customParseFormat);
 jest.mock('rc-util/lib/Portal');
 
+function triggerProps(): TriggerProps {
+  return (global as any).triggerProps;
+}
+
+jest.mock('@rc-component/trigger', () => {
+  const R = jest.requireActual('react');
+  const Trigger = jest.requireActual('@rc-component/trigger').default;
+  return R.forwardRef((props: any, ref: any) => {
+    (global as any).triggerProps = props;
+    return <Trigger {...props} ref={ref} />;
+  });
+});
+
 describe('ConfigProvider.Popup', () => {
+  beforeEach(() => {
+    (global as any).triggerProps = null;
+  });
+
   const selectLikeNodes = (
     <>
       <Select
@@ -59,4 +76,36 @@ describe('ConfigProvider.Popup', () => {
 
     expect(container).toMatchSnapshot();
   });
+
+  describe('config popupOverflow', () => {
+    it('Select', () => {
+      render(
+        <ConfigProvider popupOverflow="scroll">
+          <Select open />
+        </ConfigProvider>,
+      );
+
+      expect(triggerProps().builtinPlacements!.topLeft!.htmlRegion).toBe('scroll');
+    });
+
+    it('TreeSelect', () => {
+      render(
+        <ConfigProvider popupOverflow="scroll">
+          <TreeSelect open />
+        </ConfigProvider>,
+      );
+
+      expect(triggerProps().builtinPlacements!.topLeft!.htmlRegion).toBe('scroll');
+    });
+
+    it('Cascader', () => {
+      render(
+        <ConfigProvider popupOverflow="scroll">
+          <Cascader open />
+        </ConfigProvider>,
+      );
+
+      expect(triggerProps().builtinPlacements!.topLeft!.htmlRegion).toBe('scroll');
+    });
+  });
 });
diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts
index a1da5882a3eb..ea805d2481a7 100644
--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@@ -34,6 +34,8 @@ export interface ThemeConfig {
   inherit?: boolean;
 }
 
+export type PopupOverflow = 'viewport' | 'scroll';
+
 export interface ConfigConsumerProps {
   getTargetContainer?: () => HTMLElement;
   getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
@@ -59,6 +61,7 @@ export interface ConfigConsumerProps {
   };
   virtual?: boolean;
   popupMatchSelectWidth?: boolean;
+  popupOverflow?: PopupOverflow;
   form?: {
     requiredMark?: RequiredMark;
     colon?: boolean;
diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
index 1c1bea1c482f..b21f009ec012 100644
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@@ -56,7 +56,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p
 | csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | { nonce: string } | - |  |
 | direction | Set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |
 | popupMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | - | 5.5.0 |
-| popupOverflow | Select like component popup logic. Can set to show in viewport or follow window scroll | 'viewport' \| 'scroll' | 'viewport' | 5.5.0 |
+| popupOverflow | Select like component popup logic. Can set to show in viewport or follow window scroll | 'viewport' \| 'scroll' <InlinePopover previewURL="https://user-images.githubusercontent.com/5378891/230344474-5b9f7e09-0a5d-49e8-bae8-7d2abed6c837.png"></InlinePopover> | 'viewport' | 5.5.0 |
 | form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) } | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0 |
 | getPopupContainer | To set the container of the popup element. The default is to create a `div` element in `body` | function(triggerNode) | () => document.body |  |
 | getTargetContainer | Config Affix, Anchor scroll target container | () => HTMLElement | () => window | 4.2.0 |
diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
index 9d599d400935..451649beac80 100644
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@@ -16,7 +16,14 @@ import LocaleContext from '../locale/context';
 import defaultLocale from '../locale/en_US';
 import { DesignTokenContext } from '../theme/internal';
 import defaultSeedToken from '../theme/themes/seed';
-import type { ConfigConsumerProps, CSPConfig, DirectionType, Theme, ThemeConfig } from './context';
+import type {
+  ConfigConsumerProps,
+  CSPConfig,
+  DirectionType,
+  PopupOverflow,
+  Theme,
+  ThemeConfig,
+} from './context';
 import { ConfigConsumer, ConfigContext, defaultIconPrefixCls } from './context';
 import { registerTheme } from './cssVariables';
 import type { RenderEmptyHandler } from './defaultRenderEmpty';
@@ -118,6 +125,7 @@ export interface ConfigProviderProps {
   /** @deprecated Please use `popupMatchSelectWidth` instead */
   dropdownMatchSelectWidth?: boolean;
   popupMatchSelectWidth?: boolean;
+  popupOverflow?: PopupOverflow;
   theme?: ThemeConfig;
 }
 
@@ -185,6 +193,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     virtual,
     dropdownMatchSelectWidth,
     popupMatchSelectWidth,
+    popupOverflow,
     legacyLocale,
     parentContext,
     iconPrefixCls: customIconPrefixCls,
@@ -235,6 +244,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     space,
     virtual,
     popupMatchSelectWidth: popupMatchSelectWidth ?? dropdownMatchSelectWidth,
+    popupOverflow,
     getPrefixCls,
     iconPrefixCls,
     theme: mergedTheme,
diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
index bd7907b73ee7..574081685d9b 100644
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@@ -57,7 +57,7 @@ export default Demo;
 | csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - |  |
 | direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |
 | popupMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。`false` 时会关闭虚拟滚动 | boolean \| number | - | 5.5.0 |
-| popupOverflow | Select 类组件弹层展示逻辑，默认为可视区域滚动，可配置成滚动区域滚动 | 'viewport' \| 'scroll' | 'viewport' | 5.5.0 |
+| popupOverflow | Select 类组件弹层展示逻辑，默认为可视区域滚动，可配置成滚动区域滚动 | 'viewport' \| 'scroll' <InlinePopover previewURL="https://user-images.githubusercontent.com/5378891/230344474-5b9f7e09-0a5d-49e8-bae8-7d2abed6c837.png"></InlinePopover> | 'viewport' | 5.5.0 |
 | form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)} | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0 |
 | getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | function(triggerNode) | () => document.body |  |
 | getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 |
diff --git a/components/select/index.tsx b/components/select/index.tsx
index 0379caa68111..4bc74e95406e 100755
--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@@ -99,6 +99,7 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
     direction,
     virtual,
     popupMatchSelectWidth: contextPopupMatchSelectWidth,
+    popupOverflow,
     select,
   } = React.useContext(ConfigContext);
   const size = React.useContext(SizeContext);
@@ -198,7 +199,7 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
     return direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
   }, [placement, direction]);
 
-  const mergedBuiltinPlacements = useBuiltinPlacements(builtinPlacements);
+  const mergedBuiltinPlacements = useBuiltinPlacements(builtinPlacements, popupOverflow);
 
   // ====================== Warning ======================
   if (process.env.NODE_ENV !== 'production') {
diff --git a/components/select/useBuiltinPlacements.tsx b/components/select/useBuiltinPlacements.tsx
index 8deb030b3213..62f56d6ec200 100644
--- a/components/select/useBuiltinPlacements.tsx
+++ b/components/select/useBuiltinPlacements.tsx
@@ -1,37 +1,45 @@
 import type { AlignType, BuildInPlacements } from '@rc-component/trigger';
+import type { PopupOverflow } from '../config-provider/context';
 
-const sharedConfig = {
-  overflow: {
-    adjustX: true,
-    adjustY: true,
-    shiftY: true,
-  },
-  htmlRegion: 'visible' as const,
-};
+const getBuiltInPlacements = (popupOverflow?: PopupOverflow): Record<string, AlignType> => {
+  const htmlRegion: AlignType['htmlRegion'] = popupOverflow === 'scroll' ? 'scroll' : 'visible';
+
+  const sharedConfig = {
+    overflow: {
+      adjustX: true,
+      adjustY: true,
+      shiftY: true,
+    },
+    htmlRegion,
+  };
 
-const defaultBuiltInPlacements: Record<string, AlignType> = {
-  bottomLeft: {
-    ...sharedConfig,
-    points: ['tl', 'bl'],
-    offset: [0, 4],
-  },
-  bottomRight: {
-    ...sharedConfig,
-    points: ['tr', 'br'],
-    offset: [0, 4],
-  },
-  topLeft: {
-    ...sharedConfig,
-    points: ['bl', 'tl'],
-    offset: [0, -4],
-  },
-  topRight: {
-    ...sharedConfig,
-    points: ['br', 'tr'],
-    offset: [0, -4],
-  },
+  return {
+    bottomLeft: {
+      ...sharedConfig,
+      points: ['tl', 'bl'],
+      offset: [0, 4],
+    },
+    bottomRight: {
+      ...sharedConfig,
+      points: ['tr', 'br'],
+      offset: [0, 4],
+    },
+    topLeft: {
+      ...sharedConfig,
+      points: ['bl', 'tl'],
+      offset: [0, -4],
+    },
+    topRight: {
+      ...sharedConfig,
+      points: ['br', 'tr'],
+      offset: [0, -4],
+    },
+  };
 };
 
-export default function useBuiltinPlacements(buildInPlacements?: BuildInPlacements) {
-  return buildInPlacements || defaultBuiltInPlacements;
+export default function useBuiltinPlacements(
+  buildInPlacements?: BuildInPlacements,
+  popupOverflow?: PopupOverflow,
+) {
+  return buildInPlacements || getBuiltInPlacements(popupOverflow);
 }
diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx
index 68b50719e9c4..66fe1fe91d89 100644
--- a/components/tree-select/index.tsx
+++ b/components/tree-select/index.tsx
@@ -111,6 +111,7 @@ const InternalTreeSelect = <
     direction,
     virtual,
     popupMatchSelectWidth: contextPopupMatchSelectWidth,
+    popupOverflow,
   } = React.useContext(ConfigContext);
   const size = React.useContext(SizeContext);
 
@@ -203,7 +204,7 @@ const InternalTreeSelect = <
     return direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
   }, [placement, direction]);
 
-  const mergedBuiltinPlacements = useBuiltinPlacements(builtinPlacements);
+  const mergedBuiltinPlacements = useBuiltinPlacements(builtinPlacements, popupOverflow);
 
   const mergedSize = compactSize || customizeSize || size;
   // ===================== Disabled =====================