fix: dropdownMatchSelectWidth:false not close virtual scroll #5242

Author: tangjinzhou

components/_util/hooks/useConfigInject.ts

@@ -47,10 +47,15 @@ export default (
   const getPopupContainer = computed(
     () => props.getPopupContainer || configProvider.getPopupContainer,
   );
-  const virtual = computed(() => props.virtual ?? configProvider.virtual);
+
   const dropdownMatchSelectWidth = computed<boolean | number>(
     () => props.dropdownMatchSelectWidth ?? configProvider.dropdownMatchSelectWidth,
   );
+  const virtual = computed(
+    () =>
+      (props.virtual === undefined ? configProvider.virtual !== false : props.virtual !== false) &&
+      dropdownMatchSelectWidth.value !== false,
+  );
   const size = computed(() => props.size || configProvider.componentSize);
   const autocomplete = computed(() => props.autocomplete || configProvider.input?.autocomplete);
   const csp = computed(() => configProvider.csp);

components/config-provider/index.en-US.md

@@ -55,6 +55,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p
 | prefixCls | set prefix class | string | ant |  |
 | pageHeader | Unify the ghost of pageHeader ,Ref [pageHeader](<(/components/page-header)> | { ghost:boolean } | 'true' | 1.5.0 |
 | transformCellText | Table data can be changed again before rendering. The default configuration of general user empty data. | Function({ text, column, record, index }) => any | - | 1.5.4 ｜ |
+| virtual | Disable virtual scroll when set to false | boolean | true | 3.0 |
 
 ### ConfigProvider.config() `3.0.0+`
 

components/config-provider/index.zh-CN.md

@@ -56,6 +56,7 @@ ConfigProvider 使用 Vue 的 [provide / inject](https://vuejs.org/v2/api/#provi
 | pageHeader | 统一设置 pageHeader 的 ghost，参考 [pageHeader](<(/components/page-header)>) | { ghost: boolean } | 'true' | 1.5.0 |
 | prefixCls | 设置统一样式前缀。注意：需要配合 `less` 变量 `@ant-prefix` 使用 | string | `ant` |  |
 | transformCellText | Table 数据渲染前可以再次改变，一般用户空数据的默认配置 | Function({ text, column, record, index }) => any | - | 1.5.4 ｜ |
+| virtual | 设置 `false` 时关闭虚拟滚动 | boolean | - | 3.0 |
 
 ### ConfigProvider.config() `3.0.0+`
 

components/tree-select/index.en-US.md

@@ -26,6 +26,7 @@ Tree selection control.
 | filterTreeNode | Whether to filter treeNodes by input value. The value of `treeNodeFilterProp` is used for filtering by default. | boolean\|Function(inputValue: string, treeNode: TreeNode) (should return boolean) | Function |  |
 | getPopupContainer | To set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. | Function(triggerNode) | () => document.body |  |
 | labelInValue | whether to embed label in value, turn the format of value from `string` to `{value: string, label: VNode, halfChecked: string[]}` | boolean | false |  |
+| listHeight | Config popup height | number | 256 |  |
 | loadData | Load data asynchronously. | function(node) | - |  |
 | maxTagCount | Max tag count to show | number | - |  |
 | maxTagPlaceholder | Placeholder for not showing tags | slot/function(omittedValues) | - |  |
@@ -51,6 +52,7 @@ Tree selection control.
 | treeNodeFilterProp | Will be used for filtering if `filterTreeNode` returns true | string | 'value' |  |
 | treeNodeLabelProp | Will render as content of select | string | 'title' |  |
 | value(v-model) | To set the current selected treeNode(s). | string\|string\[] | - |  |
+| virtual | Disable virtual scroll when set to false | boolean | true | 3.0 |
 | title | custom title | slot |  | 3.0.0 |
 
 ### Events

components/tree-select/index.tsx

@@ -229,9 +229,9 @@ const TreeSelect = defineComponent({
       return (
         <VcTreeSelect
           {...attrs}
+          {...selectProps}
           virtual={virtual.value}
           dropdownMatchSelectWidth={dropdownMatchSelectWidth.value}
-          {...selectProps}
           id={id}
           fieldNames={fieldNames}
           ref={treeSelectRef}

components/tree-select/index.zh-CN.md

@@ -27,6 +27,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
 | filterTreeNode | 是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值 | boolean\|Function(inputValue: string, treeNode: TreeNode) (函数需要返回 bool 值) | Function |  |
 | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | Function(triggerNode) | () => document.body |  |
 | labelInValue | 是否把每个选项的 label 包装到 value 中，会把 value 类型从 `string` 变为 `{value: string, label: VNode, halfChecked(treeCheckStrictly 时有效): string[] }` 的格式 | boolean | false |  |
+| listHeight | 设置弹窗滚动高度 | number | 256 |  |
 | loadData | 异步加载数据 | function(node) | - |  |
 | maxTagCount | 最多显示多少个 tag | number | - |  |
 | maxTagPlaceholder | 隐藏 tag 时显示的内容 | slot/function(omittedValues) | - |  |
@@ -52,6 +53,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
 | treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | string | 'value' |  |
 | treeNodeLabelProp | 作为显示的 prop 设置 | string | 'title' |  |
 | value(v-model) | 指定当前选中的条目 | string/string\[] | - |  |
+| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 3.0 |
 | title | 自定义标题 | slot |  | 3.0.0 |
 
 ### 事件

components/tree/index.en-US.md

@@ -38,6 +38,7 @@ Almost anything can be represented in a tree structure. Examples include directo
 | switcherIcon | customize collapse/expand icon of tree node | slot | - |  |
 | showLine | Shows a connecting line | boolean \| {showLeafIcon: boolean}(3.0+) | false |  |
 | title | custom title | slot |  | 2.0.0 |
+| virtual | Disable virtual scroll when set to false | boolean | true | 3.0 |
 
 ### Events
 

components/tree/index.zh-CN.md

@@ -39,6 +39,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
 | switcherIcon | 自定义树节点的展开/折叠图标 | slot | - |  |
 | showLine | 是否展示连接线 | boolean \| {showLeafIcon: boolean}(3.0+) | false |  |
 | title | 自定义标题 | slot |  | 2.0.0 |
+| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 3.0 |
 
 ### 事件