fix: trigger search value change when reset controlled combobox (#821)

* fix: trigger search value change when reset controlled combobox

* chore: code clean

Author: MadCcc

docs/examples/combobox.tsx

@@ -79,6 +79,23 @@ class Combobox extends React.Component {
             reset
           </button>
         </p>
+        <Select
+          value={value}
+          mode="combobox"
+          onChange={this.onChange}
+          filterOption={(inputValue, option) => {
+            if (!inputValue) {
+              return true;
+            }
+            return (option.value as string).includes(inputValue);
+          }}
+        >
+          {['1', '2', '3'].map((i) => (
+            <Option value={i} key={i}>
+              {i}
+            </Option>
+          ))}
+        </Select>
         <div>
           <Select
             disabled={disabled}

src/Select.tsx

@@ -49,7 +49,7 @@ import OptGroup from './OptGroup';
 import Option from './Option';
 import OptionList from './OptionList';
 import SelectContext from './SelectContext';
-import { toArray, hasValue } from './utils/commonUtil';
+import { hasValue, toArray } from './utils/commonUtil';
 import { fillFieldNames, flattenOptions, injectPropsWithOption } from './utils/valueUtil';
 import warningProps, { warningNullOptions } from './utils/warningPropsUtil';
 
@@ -295,7 +295,7 @@ const Select = React.forwardRef(
       const values = convert2LabelValues(internalValue);
 
       // combobox no need save value when it's no value
-      if (mode === 'combobox' && !hasValue(values[0]?.value)) {
+      if (mode === 'combobox' && !values[0]?.value) {
         return [];
       }
 
@@ -333,10 +333,7 @@ const Select = React.forwardRef(
     React.useEffect(() => {
       if (mode === 'combobox') {
         const strValue = mergedValues[0]?.value;
-
-        if (strValue !== undefined && strValue !== null) {
-          setSearchValue(String(strValue));
-        }
+        setSearchValue(hasValue(strValue) ? String(strValue) : '');
       }
     }, [mergedValues]);
 

tests/Combobox.test.tsx

@@ -39,6 +39,17 @@ describe('Select.Combobox', () => {
     expect(wrapper.render()).toMatchSnapshot();
   });
 
+  it('renders controlled correctly', () => {
+    const wrapper = mount(
+      <Select value="" mode="combobox" placeholder="Search">
+        <Option value="1">1</Option>
+        <Option value="2">2</Option>
+      </Select>,
+    );
+
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
   it('set inputValue based on value', () => {
     const wrapper = mount(
       <Select mode="combobox" value="1">

tests/__snapshots__/Combobox.test.tsx.snap

@@ -1,5 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Select.Combobox renders controlled correctly 1`] = `
+<div
+  class="rc-select rc-select-single rc-select-show-search"
+>
+  <div
+    class="rc-select-selector"
+  >
+    <span
+      class="rc-select-selection-search"
+    >
+      <input
+        aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
+        aria-autocomplete="list"
+        aria-controls="rc_select_TEST_OR_SSR_list"
+        aria-haspopup="listbox"
+        aria-owns="rc_select_TEST_OR_SSR_list"
+        autocomplete="off"
+        class="rc-select-selection-search-input"
+        id="rc_select_TEST_OR_SSR"
+        role="combobox"
+        type="search"
+        value=""
+      />
+    </span>
+    <span
+      class="rc-select-selection-placeholder"
+    >
+      Search
+    </span>
+  </div>
+</div>
+`;
+
 exports[`Select.Combobox renders correctly 1`] = `
 <div
   class="rc-select rc-select-single rc-select-show-search"