feat(TreeSelect): support not clear search value when choose item, close

alibaba-fusion#3985
h2-start · Jul 12, 2022 · 3f09e6b · 3f09e6b
1 parent ca61cd4
commit 3f09e6b
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 4 deletions.
diff --git 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 <br/><br/>**signature**:<br/>Function(selectedValues: Array, totalValues: Array) => reactNode<br/>**params**:<br/>_selectedValues_: {Array} current selected values<br/>_totalValues_: {Array} all avaliable values<br/>**returns**:<br/>{reactNode} null<br/>            | 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 |
 
 <!-- api-extra-start -->
 

diff --git a/docs/tree-select/index.md b/docs/tree-select/index.md
@@ -36,6 +36,7 @@
 | onChange                 | 选中值改变时触发的回调函数<br/><br/>**签名**:<br/>Function(value: String/Array, data: Object/Array) => void<br/>**参数**:<br/>_value_: {String/Array} 选中的值，单选时返回单个值，多选时返回数组<br/>_data_: {Object/Array} 选中的数据，包括 value, label, pos, key属性，单选时返回单个值，多选时返回数组，父子节点选中关联时，同时选中，只返回父节点 | Function                    | () => {}    |      |
 | tagInline                | 是否一行显示，仅在 multiple 和 treeCheckable 为 true 时生效                                                                                                                                                                                                                  | Boolean                     | false       | 1.25 |
 | maxTagPlaceholder        | 隐藏多余 tag 时显示的内容，在 tagInline 生效时起作用<br/><br/>**签名**:<br/>Function(selectedValues: Array, totalValues: Array) => reactNode<br/>**参数**:<br/>_selectedValues_: {Array} 当前已选中的元素<br/>_totalValues_: {Array} 总待选元素<br/>**返回值**:<br/>{reactNode} null<br/>            | Function                    | -           | 1.25 |
+| autoClearSearch          | 选择时是否自动清空 searchValue                                                                                                                                                                                                                                          | Boolean                     | true        | 1.26 |
 | showSearch               | 是否显示搜索框                                                                                                                                                                                                                                                        | Boolean                     | false       |      |
 | filterLocal              | 是否使用本地过滤，在数据源为远程的时候需要关闭此项                                                                                                                                                                                                                                      | Boolean                     | true        |      |
 | onSearch                 | 在搜索框中输入时触发的回调函数<br/><br/>**签名**:<br/>Function(keyword: String) => void<br/>**参数**:<br/>_keyword_: {String} 输入的关键字                                                                                                                                              | Function                    | () => {}    |      |

diff --git 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
@@ -719,6 +719,24 @@ describe('TreeSelect', () => {
         assertDataAndNodes(dataSource);
     })
 
+    it('should not clear search value when autoClearSearch is false', () => {
+        wrapper = mount( 
+            <TreeSelect
+                dataSource={dataSource}
+                showSearch
+                autoClearSearch={false}
+                style={{ width: 200 }}
+            />
+        )
+
+        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(<TreeSelect isPreview dataSource={dataSource} />);
         assert(wrapper.find('.next-form-preview').instance().textContent === '');

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