fix: ant-design issue #37277 when empty value into the select can't u… (#819)

* fix: ant-design issue #37277 when empty value into the select can't update the value

* fix: delete only

Author: LongHaoo

src/BaseSelect.tsx

@@ -693,7 +693,12 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
     onInternalSearch('', false, false);
   };
 
-  if (!disabled && allowClear && (displayValues.length || mergedSearchValue)) {
+  if (
+    !disabled &&
+    allowClear &&
+    (displayValues.length || mergedSearchValue) &&
+    !(mode === 'combobox' && mergedSearchValue === '')
+  ) {
     clearNode = (
       <TransBtn
         className={`${prefixCls}-clear`}

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 } from './utils/commonUtil';
+import { toArray, hasValue } from './utils/commonUtil';
 import { fillFieldNames, flattenOptions, injectPropsWithOption } from './utils/valueUtil';
 import warningProps, { warningNullOptions } from './utils/warningPropsUtil';
 
@@ -294,8 +294,8 @@ const Select = React.forwardRef(
     const rawLabeledValues = React.useMemo(() => {
       const values = convert2LabelValues(internalValue);
 
-      // combobox no need save value when it's empty
-      if (mode === 'combobox' && !values[0]?.value) {
+      // combobox no need save value when it's no value
+      if (mode === 'combobox' && !hasValue(values[0]?.value)) {
         return [];
       }
 

src/utils/commonUtil.ts

@@ -10,3 +10,7 @@ export const isClient =
 
 /** Is client side and not jsdom */
 export const isBrowserClient = process.env.NODE_ENV !== 'test' && isClient;
+
+export function hasValue(value) {
+  return value !== undefined && value !== null;
+}

tests/Combobox.test.tsx

@@ -382,6 +382,45 @@ describe('Select.Combobox', () => {
     expect(wrapper.find('input').prop('value')).toBe('abab');
   });
 
+  it("when value change to '', searchValue will change to '' ", () => {
+    class App extends React.Component {
+      public state = {
+        value: '2',
+      };
+
+      public render() {
+        return (
+          <div>
+            <button onClick={() => this.setState({ value: '' })}>value to 0</button>
+            <Select
+              value={this.state.value}
+              open
+              mode="combobox"
+              onChange={(value) => this.setState({ value })}
+              filterOption={(inputValue, option) => {
+                if (!inputValue) {
+                  return true;
+                }
+                return (option.value as string).includes(inputValue);
+              }}
+            >
+              {['1'].map((i) => (
+                <Option value={i} key={i}>
+                  {i}
+                </Option>
+              ))}
+            </Select>
+          </div>
+        );
+      }
+    }
+
+    const wrapper = mount(<App />);
+    expect(wrapper.find('.rc-select-item-option').length).toBe(0);
+    wrapper.find('button').simulate('click');
+    expect(wrapper.find('.rc-select-item-option').length).toBe(1);
+  });
+
   // [Legacy] `optionLabelProp` should not work on `combobox`
   // https://github.com/ant-design/ant-design/issues/10367
   // origin test: https://github.com/react-component/select/blob/e5fa4959336f6a423b6e30652b9047510bb6f78f/tests/Select.combobox.spec.tsx#L362