fix: null value display when mode is combobox

src/Selector/SingleSelector.tsx

@@ -34,9 +34,10 @@ const SingleSelector: React.FC<SelectorProps> = ({
   const inputEditable = combobox || (showSearch && open);
   const item = values[0];
 
+  const getDisplayValue = (value: React.ReactText): string => (value === null ? '' : String(value));
   let inputValue: string = searchValue;
   if (combobox) {
-    inputValue = item ? String(item.value) : activeValue || searchValue;
+    inputValue = item ? getDisplayValue(item.value) : activeValue || searchValue;
   }
 
   const hasTextInput = !!inputValue;

tests/Combobox.test.tsx

@@ -6,12 +6,7 @@ import Select, { Option, SelectProps } from '../src';
 import focusTest from './shared/focusTest';
 import keyDownTest from './shared/keyDownTest';
 import openControlledTest from './shared/openControlledTest';
-import {
-  expectOpen,
-  toggleOpen,
-  selectItem,
-  injectRunAllTimers,
-} from './utils/common';
+import { expectOpen, toggleOpen, selectItem, injectRunAllTimers } from './utils/common';
 import allowClearTest from './shared/allowClearTest';
 import throwOptionValue from './shared/throwOptionValue';
 
@@ -61,9 +56,7 @@ describe('Select.Combobox', () => {
     );
 
     expect(wrapper.find('input').props().value).toBe('');
-    expect(wrapper.find('.rc-select-selection-placeholder').text()).toEqual(
-      'placeholder',
-    );
+    expect(wrapper.find('.rc-select-selection-placeholder').text()).toEqual('placeholder');
     wrapper.find('input').simulate('change', { target: { value: '1' } });
     expect(wrapper.find('.rc-select-selection-placeholder').length).toBeFalsy();
     expect(wrapper.find('input').props().value).toBe('1');
@@ -224,13 +217,7 @@ describe('Select.Combobox', () => {
     const handleChange = jest.fn();
     const handleSelect = jest.fn();
     const wrapper = mount(
-      <Select
-        mode="combobox"
-        backfill
-        open
-        onChange={handleChange}
-        onSelect={handleSelect}
-      >
+      <Select mode="combobox" backfill open onChange={handleChange} onSelect={handleSelect}>
         <Option value="One">One</Option>
         <Option value="Two">Two</Option>
       </Select>,
@@ -243,14 +230,8 @@ describe('Select.Combobox', () => {
 
     input.simulate('keyDown', { which: KeyCode.ENTER });
     expect(wrapper.find('input').props().value).toEqual('One');
-    expect(handleChange).toHaveBeenCalledWith(
-      'One',
-      expect.objectContaining({ value: 'One' }),
-    );
-    expect(handleSelect).toHaveBeenCalledWith(
-      'One',
-      expect.objectContaining({ value: 'One' }),
-    );
+    expect(handleChange).toHaveBeenCalledWith('One', expect.objectContaining({ value: 'One' }));
+    expect(handleSelect).toHaveBeenCalledWith('One', expect.objectContaining({ value: 'One' }));
   });
 
   it("should hide clear icon when value is ''", () => {
@@ -340,11 +321,7 @@ describe('Select.Combobox', () => {
     jest.useFakeTimers();
     const onDropdownVisibleChange = jest.fn();
     const wrapper = mount(
-      <Select
-        mode="combobox"
-        open
-        onDropdownVisibleChange={onDropdownVisibleChange}
-      >
+      <Select mode="combobox" open onDropdownVisibleChange={onDropdownVisibleChange}>
         <Option value="One">One</Option>
         <Option value="Two">Two</Option>
       </Select>,
@@ -399,4 +376,10 @@ describe('Select.Combobox', () => {
     wrapper.update();
     expectOpen(wrapper, false);
   });
+
+  it('expect null value display empty string', () => {
+    const wrapper = mount(<Select mode="combobox" value={null} />);
+
+    expect(wrapper.find('input').props().value).toBe('');
+  });
 });