feat: tree-select support searchValue

Author: tangjinzhou

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' |

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 },

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' |

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,

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