fix(select): support 0 value to be selected

Tencent · Dec 21, 2021 · c716e92 · c716e92
1 parent 4eacffc
commit c716e92
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 40 deletions.
diff --git a/src/select/base/PopupContent.tsx b/src/select/base/PopupContent.tsx
@@ -50,30 +50,28 @@ const PopupContent = (props: SelectPopupProps) => {
   if (!children && !props.options) return null;
 
   const onSelect: SelectOptionProps['onSelect'] = (selectedValue, { label, selected, restData }) => {
-    if (selectedValue) {
-      const isValObj = valueType === 'object';
-      let objVal = {};
-      if (isValObj) {
-        objVal = { ...restData };
-        if (!keys?.label) {
-          Object.assign(objVal, { label });
-        }
-        if (!keys?.value) {
-          Object.assign(objVal, { value: selectedValue });
-        }
+    const isValObj = valueType === 'object';
+    let objVal = {};
+    if (isValObj) {
+      objVal = { ...restData };
+      if (!keys?.label) {
+        Object.assign(objVal, { label });
       }
+      if (!keys?.value) {
+        Object.assign(objVal, { value: selectedValue });
+      }
+    }
 
-      if (multiple) {
-        // calc multiple select values
-        const values = getSelectValueArr(value, selectedValue, selected, valueType, keys, objVal);
-        onChange(values, { label });
-      } else {
-        // calc single select value
-        const selectVal = valueType === 'object' ? objVal : selectedValue;
+    if (multiple) {
+      // calc multiple select values
+      const values = getSelectValueArr(value, selectedValue, selected, valueType, keys, objVal);
+      onChange(values, { label });
+    } else {
+      // calc single select value
+      const selectVal = valueType === 'object' ? objVal : selectedValue;
 
-        onChange(selectVal, { label });
-        setShowPopup(!showPopup);
-      }
+      onChange(selectVal, { label });
+      setShowPopup(!showPopup);
     }
   };
 

diff --git a/src/select/base/Select.tsx b/src/select/base/Select.tsx
@@ -5,6 +5,7 @@ import isFunction from 'lodash/isFunction';
 import get from 'lodash/get';
 import isString from 'lodash/isString';
 
+import { isNumber } from 'lodash';
 import { useLocaleReceiver } from '../../locale/LocalReceiver';
 import useConfig from '../../_util/useConfig';
 import composeRefs from '../../_util/composeRefs';
@@ -94,9 +95,7 @@ const Select = forwardRefWithStatics(
     const selectRef = useRef(null);
     const overlayRef = useRef(null);
 
-    if (value) {
-      selectedLabel = getLabel(children, value, currentOptions, keys);
-    }
+    selectedLabel = getLabel(children, value, currentOptions, keys);
 
     // 计算Select的宽高
     useEffect(() => {
@@ -203,7 +202,7 @@ const Select = forwardRefWithStatics(
       <span
         className={classNames(
           className,
-          { [`${name}-placeholder`]: !value || (Array.isArray(value) && value.length < 1) },
+          { [`${name}-placeholder`]: (!value && !isNumber(value)) || (Array.isArray(value) && value.length < 1) },
           {
             [`${name}-selectedSingle`]: selectedLabel,
           },
@@ -260,25 +259,23 @@ const Select = forwardRefWithStatics(
       return !filterable ? defaultLabel : null;
     };
 
-    const renderInput = () => {
-      const isEmpty = !value || (Array.isArray(value) && value.length === 0);
-      return (
-        <Input
-          value={isString(inputVal) ? inputVal : selectedLabel}
-          placeholder={isEmpty ? placeholder || '-请选择-' : undefined}
-          className={`${name}-input`}
-          onChange={handleInputChange}
-          onFocus={(_, context) => onFocus?.({ value, e: context?.e })}
-          onBlur={(_, context) => onBlur?.({ value, e: context?.e })}
-          onEnter={(_, context) => onEnter?.({ inputValue: inputVal, value, e: context?.e })}
-        />
-      );
-    };
+    const renderInput = () => (
+      <Input
+        value={isString(inputVal) ? inputVal : selectedLabel}
+        placeholder={multiple && get(value, 'length') > 0 ? null : selectedLabel || placeholder || '-请选择-'}
+        className={`${name}-input`}
+        onChange={handleInputChange}
+        onFocus={(_, context) => onFocus?.({ value, e: context?.e })}
+        onBlur={(_, context) => onBlur?.({ value, e: context?.e })}
+        onEnter={(_, context) => onEnter?.({ inputValue: inputVal, value, e: context?.e })}
+      />
+    );
 
     const onInputClick = (e: React.MouseEvent) => {
       e.preventDefault();
       if (!disabled) {
-        setShowPopup(!showPopup);
+        setShowPopup(true);
+        setInputVal('');
       }
     };