fix: null should show options (#506)

Author: zombieJ

src/generate.tsx

@@ -454,24 +454,33 @@ export default function generateSelector<
     }, [mergedSearchValue]);
 
     // ============================ Selector ============================
-    let displayValues = React.useMemo<DisplayLabelValueType[]>(
-      () =>
-        mergedRawValue.map((val: RawValueType) => {
-          const valueOptions = getValueOption([val]);
-          const displayValue = getLabeledValue(val, {
-            options: valueOptions,
-            prevValue: baseValue,
-            labelInValue: mergedLabelInValue,
-            optionLabelProp: mergedOptionLabelProp,
-          });
-
-          return {
-            ...displayValue,
-            disabled: isValueDisabled(val, valueOptions),
-          };
-        }),
-      [baseValue, mergedOptions],
-    );
+    let displayValues = React.useMemo<DisplayLabelValueType[]>(() => {
+      const tmpValues = mergedRawValue.map((val: RawValueType) => {
+        const valueOptions = getValueOption([val]);
+        const displayValue = getLabeledValue(val, {
+          options: valueOptions,
+          prevValue: baseValue,
+          labelInValue: mergedLabelInValue,
+          optionLabelProp: mergedOptionLabelProp,
+        });
+
+        return {
+          ...displayValue,
+          disabled: isValueDisabled(val, valueOptions),
+        };
+      });
+
+      if (
+        !mode &&
+        tmpValues.length === 1 &&
+        tmpValues[0].value === null &&
+        tmpValues[0].label === null
+      ) {
+        return [];
+      }
+
+      return tmpValues;
+    }, [baseValue, mergedOptions, mode]);
 
     // Polyfill with cache label
     displayValues = useCacheDisplayValue(displayValues);

tests/Select.test.tsx

@@ -1593,11 +1593,25 @@ describe('Select.Basic', () => {
     });
   });
 
-  it('show placeholder when searchValue is controlled', () => {
-    const wrapper = mount(<Select searchValue="light" placeholder="bamboo" />);
-    expect(wrapper.find('.rc-select-selection-placeholder').length).toBeTruthy();
-    toggleOpen(wrapper);
-    expect(wrapper.find('.rc-select-selection-placeholder').length).toBeFalsy();
+  describe('show placeholder', () => {
+    it('when searchValue is controlled', () => {
+      const wrapper = mount(<Select searchValue="light" placeholder="bamboo" />);
+      expect(wrapper.find('.rc-select-selection-placeholder').length).toBeTruthy();
+      toggleOpen(wrapper);
+      expect(wrapper.find('.rc-select-selection-placeholder').length).toBeFalsy();
+    });
+
+    it('when value is null', () => {
+      const wrapper = mount(<Select value={null} placeholder="bamboo" />);
+      expect(wrapper.find('.rc-select-selection-placeholder').length).toBeTruthy();
+    });
+
+    it('not when value is null but it is an Option', () => {
+      const wrapper = mount(
+        <Select value={null} placeholder="bamboo" options={[{ value: null, label: 'light' }]} />,
+      );
+      expect(wrapper.find('.rc-select-selection-placeholder').length).toBeFalsy();
+    });
   });
 
   it('Remove options can keep the cache', () => {