fix: no display of searchValue when autoClearSearchValue is false (#863)

* Fix clear of value bug when autoClearSearchValue is true

* Add tests

* Fix type

* Formatting

Author: roelvdboom

src/BaseSelect.tsx

@@ -98,6 +98,7 @@ export interface BaseSelectPrivateProps {
 
   // >>> Search
   searchValue: string;
+  autoClearSearchValue?: boolean;
   /** Trigger onSearch, return false to prevent trigger open event */
   onSearch: (
     searchValue: string,
@@ -245,6 +246,7 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
 
     // Search
     searchValue,
+    autoClearSearchValue,
     onSearch,
     onSearchSplit,
     tokenSeparators,
@@ -767,6 +769,7 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
           ref={selectorRef}
           id={id}
           showSearch={mergedShowSearch}
+          autoClearSearchValue={autoClearSearchValue}
           mode={mode}
           activeDescendantId={activeDescendantId}
           tagRender={tagRender}

src/Select.tsx

@@ -624,6 +624,7 @@ const Select = React.forwardRef(
           // >>> Search
           searchValue={mergedSearchValue}
           onSearch={onInternalSearch}
+          autoClearSearchValue={autoClearSearchValue}
           onSearchSplit={onInternalSearchSplit}
           dropdownMatchSelectWidth={dropdownMatchSelectWidth}
           // >>> OptionList

src/Selector/MultipleSelector.tsx

@@ -45,6 +45,7 @@ const SelectSelector: React.FC<SelectorProps> = (props) => {
     values,
     open,
     searchValue,
+    autoClearSearchValue,
     inputRef,
     placeholder,
     disabled,
@@ -79,8 +80,8 @@ const SelectSelector: React.FC<SelectorProps> = (props) => {
   const selectionPrefixCls = `${prefixCls}-selection`;
 
   // ===================== Search ======================
-  const inputValue = open || mode === 'tags' ? searchValue : '';
-  const inputEditable: boolean = mode === 'tags' || (showSearch && (open || focused));
+  const inputValue = open || (mode === "multiple" && autoClearSearchValue === false) || mode === 'tags' ? searchValue : '';
+  const inputEditable: boolean = mode === 'tags' || (mode === "multiple" && autoClearSearchValue === false) || (showSearch && (open || focused));
 
   // We measure width and set to the input immediately
   useLayoutEffect(() => {

src/Selector/index.tsx

@@ -31,6 +31,7 @@ export interface InnerSelectorProps {
   values: DisplayValueType[];
   showSearch?: boolean;
   searchValue: string;
+  autoClearSearchValue?: boolean;
   activeDescendantId?: string;
   open: boolean;
   tabIndex?: number;
@@ -60,6 +61,7 @@ export interface SelectorProps {
   mode: Mode;
   searchValue: string;
   activeValue: string;
+  autoClearSearchValue: boolean;
   inputElement: JSX.Element;
   maxLength?: number;
 

tests/Multiple.test.tsx

@@ -621,4 +621,30 @@ describe('Select.Multiple', () => {
       expect(wrapper.find('.rc-select-item-option-state-icon').at(0).text()).toBe('');
     });
   });
+
+  describe("autoClearSearchValue", () => {
+    it('search value should not show when autoClearSearchValue is undefined', () => {
+      const wrapper = mount(
+        <Select
+          mode="multiple"
+          open={false}
+          showSearch={true}
+          searchValue="test"
+        />,
+      );
+      expect(wrapper.find('input').props().value).toBe('');
+    });
+    it('search value should show when autoClearSearchValue is true', () => {
+      const wrapper = mount(
+        <Select
+          mode="multiple"
+          open={false}
+          autoClearSearchValue={false}
+          showSearch={true}
+          searchValue="test"
+        />,
+      );
+      expect(wrapper.find('input').props().value).toBe('test');
+    });
+  });
 });