diff --git a/components/tree-select/index.en-US.md b/components/tree-select/index.en-US.md index 709df63e1..6b70fe6a4 100644 --- a/components/tree-select/index.en-US.md +++ b/components/tree-select/index.en-US.md @@ -18,6 +18,7 @@ | multiple | Support multiple or not, will be `true` when enable `treeCheckable`. | boolean | false | | placeholder | Placeholder of the select input | string\|slot | - | | searchPlaceholder | Placeholder of the search input | string\|slot | - | +| searchValue(.sync) | work with `search` event to make search value controlled. | string | - | | showCheckedStrategy | The way show selected item in box. **Default:** just show child nodes. **`TreeSelect.SHOW_ALL`:** show all checked treeNodes (include parent treeNode). **`TreeSelect.SHOW_PARENT`:** show checked treeNodes (just show parent treeNode). | enum { TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD | | showSearch | Whether to display a search input in the dropdown menu(valid only in the single mode) | boolean | false | | size | To set the size of the select input, options: `large` `small` | string | 'default' | diff --git a/components/tree-select/index.jsx b/components/tree-select/index.jsx index ac44386a7..f2284c438 100644 --- a/components/tree-select/index.jsx +++ b/components/tree-select/index.jsx @@ -28,7 +28,9 @@ const TreeSelect = { prop: 'value', event: 'change', }, - + inject: { + configProvider: { default: {}}, + }, created () { warning( this.multiple !== false || !this.treeCheckable, @@ -94,8 +96,10 @@ const TreeSelect = { notFoundContent, dropdownStyle, dropdownClassName, + getPopupContainer, ...restProps } = props + const { getPopupContainer: getContextPopupContainer } = this.configProvider const rest = omit(restProps, ['inputIcon', 'removeIcon', 'clearIcon', 'switcherIcon', 'suffixIcon']) let suffixIcon = getComponentFromProp(this, 'suffixIcon') suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon @@ -131,6 +135,7 @@ const TreeSelect = { removeIcon, clearIcon, ...rest, + getPopupContainer: getPopupContainer || getContextPopupContainer, dropdownClassName: classNames(dropdownClassName, `${prefixCls}-tree-dropdown`), prefixCls, dropdownStyle: { maxHeight: '100vh', overflow: 'auto', ...dropdownStyle }, diff --git a/components/tree-select/index.zh-CN.md b/components/tree-select/index.zh-CN.md index 4d879304d..e2c277be1 100644 --- a/components/tree-select/index.zh-CN.md +++ b/components/tree-select/index.zh-CN.md @@ -18,6 +18,7 @@ | multiple | 支持多选(当设置 treeCheckable 时自动变为true) | boolean | false | | placeholder | 选择框默认文字 | string\|slot | - | | searchPlaceholder | 搜索框默认文字 | string\|slot | - | +| searchValue(.sync) | 搜索框的值,可以通过 `search` 事件获取用户输入 | string | - | | showCheckedStrategy | 定义选中项回填的方式。`TreeSelect.SHOW_ALL`: 显示所有选中节点(包括父节点). `TreeSelect.SHOW_PARENT`: 只显示父节点(当父节点下所有子节点都选中时). 默认只显示子节点. | enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD | | showSearch | 在下拉中显示搜索框(仅在单选模式下生效) | boolean | false | | size | 选择框大小,可选 `large` `small` | string | 'default' | diff --git a/components/tree-select/interface.jsx b/components/tree-select/interface.jsx index 839dfc6c6..348ea95a6 100644 --- a/components/tree-select/interface.jsx +++ b/components/tree-select/interface.jsx @@ -26,6 +26,7 @@ export const TreeSelectProps = () => ({ // onChange: (value: any, label: any) => void, // onSearch: (value: any) => void, searchPlaceholder: PropTypes.string, + searchValue: PropTypes.string, showCheckedStrategy: PropTypes.oneOf(['SHOW_ALL', 'SHOW_PARENT', 'SHOW_CHILD']), suffixIcon: PropTypes.any, treeCheckable: PropTypes.bool, diff --git a/components/vc-tree-select/src/Select.jsx b/components/vc-tree-select/src/Select.jsx index 35c339783..e7fd1be1d 100644 --- a/components/vc-tree-select/src/Select.jsx +++ b/components/vc-tree-select/src/Select.jsx @@ -644,6 +644,7 @@ const Select = { // We should also trigger onSearch with empty string here // since if user use `treeExpandedKeys`, it need user have the ability to reset it. if (searchValue && searchValue.length) { + this.__emit('update:searchValue', '') this.__emit('search', '') } } @@ -754,6 +755,7 @@ const Select = { onSearchInputChange ({ target: { value }}) { const { _treeNodes: treeNodes, _valueEntities: valueEntities } = this.$data const { filterTreeNode, treeNodeFilterProp } = this.$props + this.__emit('update:searchValue', value) this.__emit('search', value) let isSet = false