fix(SearchSelect): 修复 form 在没有 initialValue 情况默认赋值了空字符问题 (#654)

uiwjs · Mar 10, 2022 · d5a2bd7 · d5a2bd7
1 parent 9bfa248
commit d5a2bd7
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 30 deletions.
diff --git a/packages/react-popover/README.md b/packages/react-popover/README.md
@@ -38,7 +38,7 @@ class Demo extends React.Component {
   }
   render() {
     return (
-      <Row style={{ alignItems:'center' }}>
+      <Row style={{ alignItems: 'center' }}>
         <Popover
           trigger="click"
           placement="top"
@@ -60,27 +60,27 @@ class Demo extends React.Component {
         >
           <Button active={this.state.isOpen}>弹出目标</Button>
         </Popover>
-                <div style={{marginLeft:20}}>
-        <Popover
-          trigger="click"
-          placement="top"
-          content={
-            <Card bordered={false} title="Card标题" extra={<a href="#">更多</a>} style={{ width: 200 }}>
-              <div>Are you sure you want to delete these items? You won't be able to recover them.</div>
-              <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 15 }}>
-                <Button size="small" onClick={this.onClick.bind(this)}>
-                  Cancel
-                </Button>
-                <Button type="danger" size="small" onClick={this.onClick.bind(this)}>
-                  Delete
-                </Button>
-              </div>
-            </Card>
-          }
-        >
-          <Icon type="setting" color="#343a40" style={{ fontSize: 20 }} />
-        </Popover>
+        <div style={{ marginLeft: 20 }}>
+          <Popover
+            trigger="click"
+            placement="top"
+            content={
+              <Card bordered={false} title="Card标题" extra={<a href="#">更多</a>} style={{ width: 200 }}>
+                <div>Are you sure you want to delete these items? You won't be able to recover them.</div>
+                <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 15 }}>
+                  <Button size="small" onClick={this.onClick.bind(this)}>
+                    Cancel
+                  </Button>
+                  <Button type="danger" size="small" onClick={this.onClick.bind(this)}>
+                    Delete
+                  </Button>
                 </div>
+              </Card>
+            }
+          >
+            <Icon type="setting" color="#343a40" style={{ fontSize: 20 }} />
+          </Popover>
+        </div>
       </Row>
     )
   }

diff --git a/packages/react-search-select/README.md b/packages/react-search-select/README.md
@@ -237,7 +237,7 @@ ReactDOM.render(<Demo />, _mount_);
 | placeholder | 选择框默认文字 | String | - | - |
 | maxTagCount | 多选模式下展示tag的个数,默认所有 | number | - | - |
 | labelInValue | 开启会把 Select 的 value 类型从 `string/number` 变为 `{ value: string/number, label: string }` | Boolean | `false` | - |
-| showSearch | 使单选模式可搜索 | Boolean | - | - |
+| showSearch | 是否可搜索 | Boolean | - | - |
 | size | 选择框尺寸 | Enum{large, default, small } | `default` | - |
 | tagProps | 将参数传递给 [`<Tag>`](https://uiwjs.github.io/#/components/tag) 组件 | `TagProps` | `{}` | `4.13.0` |
 | onChange | 选中 option，或 input 的 value，调用此函数 | function(value:String \| Number \| String[] \| Number[] \| LabeledValue \| LabeledValue[]) | - | - |

diff --git a/packages/react-search-select/src/index.tsx b/packages/react-search-select/src/index.tsx
@@ -72,17 +72,21 @@ export default function SearchSelect(props: SearchSelectProps) {
   );
   const divRef = useRef<HTMLDivElement>(null);
 
+  const valueVerify = (value: ValueType | Array<ValueType> | undefined) => {
+    return value !== undefined && value !== '';
+  };
+
   const valueRef = useRef<Array<SearchSelectOptionData>>();
   valueRef.current = useMemo(() => selectedValue, [selectedValue]);
 
   useEffect(() => {
-    if (value === undefined && defaultValue !== undefined) {
-      selectedValueChange(defaultValue);
+    if (!valueVerify(value) && valueVerify(defaultValue)) {
+      selectedValueChange(defaultValue!);
     }
   }, []);
 
   useEffect(() => {
-    if (value !== undefined) {
+    if (valueVerify(value)) {
       selectedValueChange(value!);
     }
   }, [JSON.stringify(value)]);
@@ -125,6 +129,11 @@ export default function SearchSelect(props: SearchSelectProps) {
     return values;
   }
 
+  const selectedLabelChange = (value: string) => {
+    setSelectedLabel(value);
+    showSearch && onSearch?.(value);
+  };
+
   function handleItemClick(item: SearchSelectOptionData) {
     setInnerIsOpen(false);
     const values = [item];
@@ -160,9 +169,10 @@ export default function SearchSelect(props: SearchSelectProps) {
   // handle change
   function handleInputChange(value: string) {
     setInnerIsOpen(true);
-    setSelectedLabel(value);
     setSelectIconType(showSearch && value ? 'loading' : '');
-    showSearch && onSearch && onSearch(value);
+    // setSelectedLabel(value);
+    // showSearch && onSearch && onSearch(value);
+    selectedLabelChange(value);
   }
   // 清除选中的值
   function resetSelectedValue(e: React.MouseEvent<any, MouseEvent>) {
@@ -185,9 +195,10 @@ export default function SearchSelect(props: SearchSelectProps) {
     }
   }
 
-  function onVisibleChange(open: boolean) {
-    setInnerIsOpen(open);
-    if (!open) setSelectedLabel('');
+  function onVisibleChange(isOpen: boolean) {
+    const selectedValue = valueRef.current as SearchSelectOptionData[];
+    setInnerIsOpen(isOpen);
+    if (!isOpen) selectedLabelChange('');
     if (!isMultiple && selectedValue.length > 0) {
       setSelectedLabel(selectedValue[0].label);
     }
@@ -235,6 +246,7 @@ export default function SearchSelect(props: SearchSelectProps) {
         ref={divRef}
         onMouseOver={() => renderSelectIcon('enter')}
         onMouseLeave={() => renderSelectIcon('leave')}
+        onClick={() => inputRef.current?.focus()}
         style={{ width: '100%', maxWidth: 'none', ...style }}
       >
         {isMultiple ? (