diff --git a/docs/tree-select/index.en-us.md b/docs/tree-select/index.en-us.md
index 9953cb23ec..15bfb2f2b5 100644
--- a/docs/tree-select/index.en-us.md
+++ b/docs/tree-select/index.en-us.md
@@ -55,6 +55,7 @@ Like Select, TreeSelect can be used when the selected data structure is a tree s
| tagInline | if display in one line | Boolean | false | 1.25 |
| maxTagPlaceholder | return custom content when hide extra tags, valid when tagInline is true
**signature**:
Function(selectedValues: Array, totalValues: Array) => reactNode
**params**:
_selectedValues_: {Array} current selected values
_totalValues_: {Array} all avaliable values
**returns**:
{reactNode} null
| Function | - | 1.25 |
| preserveNonExistentValue | if reserve value when value/defaultValue not exist in dataSource | Boolean | false | 1.25 |
+| autoClearSearch | auto clear search value when choose item | Boolean | true | 1.26 |
diff --git a/docs/tree-select/index.md b/docs/tree-select/index.md
index f646016463..96dd28c989 100644
--- a/docs/tree-select/index.md
+++ b/docs/tree-select/index.md
@@ -36,6 +36,7 @@
| onChange | 选中值改变时触发的回调函数
**签名**:
Function(value: String/Array, data: Object/Array) => void
**参数**:
_value_: {String/Array} 选中的值,单选时返回单个值,多选时返回数组
_data_: {Object/Array} 选中的数据,包括 value, label, pos, key属性,单选时返回单个值,多选时返回数组,父子节点选中关联时,同时选中,只返回父节点 | Function | () => {} | |
| tagInline | 是否一行显示,仅在 multiple 和 treeCheckable 为 true 时生效 | Boolean | false | 1.25 |
| maxTagPlaceholder | 隐藏多余 tag 时显示的内容,在 tagInline 生效时起作用
**签名**:
Function(selectedValues: Array, totalValues: Array) => reactNode
**参数**:
_selectedValues_: {Array} 当前已选中的元素
_totalValues_: {Array} 总待选元素
**返回值**:
{reactNode} null
| Function | - | 1.25 |
+| autoClearSearch | 选择时是否自动清空 searchValue | Boolean | true | 1.26 |
| showSearch | 是否显示搜索框 | Boolean | false | |
| filterLocal | 是否使用本地过滤,在数据源为远程的时候需要关闭此项 | Boolean | true | |
| onSearch | 在搜索框中输入时触发的回调函数
**签名**:
Function(keyword: String) => void
**参数**:
_keyword_: {String} 输入的关键字 | Function | () => {} | |
diff --git a/src/tree-select/tree-select.jsx b/src/tree-select/tree-select.jsx
index 0c19c26b1d..5cbd705175 100644
--- a/src/tree-select/tree-select.jsx
+++ b/src/tree-select/tree-select.jsx
@@ -198,6 +198,11 @@ class TreeSelect extends Component {
* @version 1.25
*/
maxTagPlaceholder: PropTypes.func,
+ /**
+ * 选择时是否自动清空 searchValue
+ * @version 1.26
+ */
+ autoClearSearch: PropTypes.bool,
/**
* 是否显示搜索框
*/
@@ -317,6 +322,7 @@ class TreeSelect extends Component {
defaultValue: null,
onChange: noop,
tagInline: false,
+ autoClearSearch: true,
showSearch: false,
filterLocal: true,
onSearch: noop,
@@ -530,7 +536,7 @@ class TreeSelect extends Component {
}
handleSelect(selectedKeys, extra) {
- const { multiple, onChange } = this.props;
+ const { multiple, onChange, autoClearSearch } = this.props;
const { selected } = extra;
if (multiple || selected) {
@@ -551,14 +557,16 @@ class TreeSelect extends Component {
multiple ? onChange(value, data) : onChange(value[0], data[0]);
// clear search value manually
- this.select.handleSearchClear('select');
+ if (autoClearSearch) {
+ this.select.handleSearchClear('select');
+ }
} else {
this.handleVisibleChange(false, 'fromTree');
}
}
handleCheck(checkedKeys) {
- const { onChange } = this.props;
+ const { onChange, autoClearSearch } = this.props;
let value = this.getValueByKeys(checkedKeys);
const nonExistentValues = this.getNonExistentValues();
@@ -573,7 +581,9 @@ class TreeSelect extends Component {
onChange(value, this.getData(value));
// clear search value manually
- this.select.handleSearchClear('select');
+ if (autoClearSearch) {
+ this.select.handleSearchClear('select');
+ }
}
handleRemove(removedItem) {
diff --git a/test/tree-select/index-spec.js b/test/tree-select/index-spec.js
index bdeabe3155..af6843d06b 100644
--- a/test/tree-select/index-spec.js
+++ b/test/tree-select/index-spec.js
@@ -719,6 +719,24 @@ describe('TreeSelect', () => {
assertDataAndNodes(dataSource);
})
+ it('should not clear search value when autoClearSearch is false', () => {
+ wrapper = mount(
+
+ )
+
+ wrapper.find('.next-select-trigger-search input').simulate('change', { target: { value: '外套' } });
+ wrapper.find('.next-tree-node[value="4"]').simulate('click');
+ wrapper.update();
+
+ assert( wrapper.find('.next-select-trigger-search input').prop('value') === '外套');
+
+ })
+
it('fix issues use isPreview when value is empty', () => {
wrapper = mount();
assert(wrapper.find('.next-form-preview').instance().textContent === '');
diff --git a/types/tree-select/index.d.ts b/types/tree-select/index.d.ts
index 461b106de9..71d1ac1018 100644
--- a/types/tree-select/index.d.ts
+++ b/types/tree-select/index.d.ts
@@ -98,6 +98,11 @@ export interface TreeSelectProps extends HTMLAttributesWeak, CommonProps {
*/
maxTagPlaceholder?: (selectedValues: any[], totalValues?: any[]) => React.ReactNode | HTMLElement;
+ /**
+ * 是否自动清除 searchValue
+ */
+ autoClearSearch?: boolean;
+
/**
* 是否显示搜索框
*/