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; + /** * 是否显示搜索框 */